Propriétés padding/margin à 0 sur * ou sur html et body, différence ?

Bonjour,

Pour parler franchement, je n'ai jamais trop fait attention à tout cela précédemment, mais maintenant des petites questions retiennent mon attention, à commencer par celle-ci :

Il y a t'il une différence entre :

* {
padding: 0;
margin: 0;
}

et

html, body {
padding: 0;
margin: 0;
}

?

Par défaut il y a toujours une marge que donne le navigateur, de 8px il me semble bien (et à vrai dire, je n'ai jamais su la raison).
Et quasiment toujours, on souhaite la supprimer. Pour cela, j'ai toujours utilisé le sélecteur * (all).

Le soucis avec le premier sélecteur se trouve au niveau de la performance. Et je me demande si c'est le même soucis de toute façon avec la deuxième méthode.

Et si il y a une différence, est-ce mieux de placer les propriétés padding et margin à 0 sur le sélecteur "*" ou sur "html, body" ?

Merci par avance de vos réponses
Modifié par Guirec (12 Jul 2008 - 20:04)

Salut Guirec,

la différence est que * { ... } va cibler tous les éléments alors que html, body { ... } ne va cibler que les éléments HTML et BODY.

As-tu déjà lu la documentation sur les sélecteurs ?

Pour le reste, cet article devrait répondre à toutes tes questions !

A+

Bonjour,

je rajouterai que la performance ne doit pas être un problème bien grave: n'importe quel code JS ou 10ko d'images superflus auront bien plus d'impact que le choix de telle ou telle "stratégie" en CSS ...
L'important est d'avoir un code qui tient le choc quand un contenu textuel va déborder d'1px et fiche en l'air ta mise en page, sur un nouveau navigateur (Fx3, Opera 9.5, Safari 3.1 et un jour prochain IE8), quand une pub ou un script de statistiques présent sur un serveur extérieur ne répond plus et plus classiquement quand le visiteur a une configuration sortant de l'ordinaire (navigateur, polices agrandies, couleurs persos, etc)
L'important est aussi, si tu travailles en équipe ou si ton code doit être repris, que tes choix soient bien documentés s'ils doivent avoir un effet "surprenant" à tel ou tel endroit (pourquoi tout est "collé" dans ce formulaire ou pourquoi il y a un espace pareil à tel endroit?)

* cible TOUT, y compris h1-h6, p, ul/ol et li, blockquote, ...
Si tu ne te sers que de peu d'éléments HTML et qu'en plus tu refixes leurs marges après les avoir annulées, c'est pas très "performant"
E. Meyer s'est penché l'an dernier sur le problème et a compilé une version plus efficiente de la RAZ: Reset CSS.
Perso, je reste sur une RAZ très très légère qu'utilise Raphaël

a img {
	border: 0;
}

html, body, ol, ul, form, form p, fieldset, h1 {
	margin: 0;
	padding: 0;
}

fieldset subit le même sort que a img lorsqu'il est utilisé.

Autre RAZ qui accompagne souvent l'utilisation des em:

font: normal [b]62.5%[/b] Verdana, toussa;

Perso, ça ne me dérange pas d'utiliser une table à deux entrées imprimée qui fait la correspondance (exemple) parent 15px / taille souhaitée pour le descendant 12px --> écrire 0.8em
mais les clients apprécient peu de sortir la calculette sans arrêt
Modifié par Felipe (13 Jul 2008 - 11:27)

Merci pour toutes ces réponses

Ce n'est pas évident de faire quelque chose de très propre