Bonjour,
Je souhaiterai prendre des avis SVP.
Lorsque par exemple on met à un élément un margin-top:8px; et que l'on veut une marge extérieur seulement en haut,
est ce qu'il est conseillé d'aussi mettre margin-right:0; margin-bottom:0; margin-left:0; ?
Ou on peut mettre que le margin-top:8px;.

Exemple, si je veut une marge seulement en haut de mes paragraphes, dans mon CSS Qu'est ce qui est le mieux:
p { color:#000000; margin-top:0; }

ou:
p { color:#000000; margin-top:0; margin-right:0;  margin-bottom:0;  margin-left:0 }

Et je me pose la même question avec les padding?

Merci beaucoup.
Modérateur
Bonjour

lorsqu'on ne précise que le margin-top, les autres marges seront héritées de ce qui a été défini avant, notamment dans le cas d'un p qui a généralement des marges en haut et en bas définies par le navigateur. Pour savoir sur quelles bases on part, on redéfinis ce genre d'éléments dès le départ, ou on utilise un «reset css» : http://www.alsacreations.com/astuce/lire/36-reset-css.html

Si on veut être absolument sûr du résultat final, il vaut mieux définir toutes les valeurs. Mais profiter de la cascade a aussi de gros avantages, par exemple:


p {
  margin: 1em 0; /* 1em en haut et en bas, 0 à gauche et à droite */
}
p:first-of-type {
  margin-top: 3em; /* aura donc 3em 0 1em 0 */
}
p.retrait {
  margin-left: 2em; /* aura donc 1em 0 1em 2em ou  3em 0 1em 2em si il est le premier p du block */
}


Si je veux ensuite modifier l'espace entre les paragraphes, je n'aurai qu'une définition à aller modifier, et les espaces seront les même partout. 3 définitions à modifier c'est jouable, mais quand le projet grossi, il se peut qu'il y ait des dizaines de définitions, réparties dans plusieurs fichiers.

Une méthode cohérente est donc de:
1) redéfinir les styles des balises dès le départ ou utiliser un reset CSS
2) définir si possible toujours le moins possible et éviter d'écraser une définition par la même.
3) éviter d'avoir trop de combinaisons possibles: ul p, p:first-child, p.super, p + p, #main p, etc.