28172 sujets

CSS et mise en forme, CSS3

Suite à la publication de l'article Une feuille de styles de base pour bien démarrer vos projets dans la catégorie Astuce par Florent V., je m'interroge.
Dans cet article Florent préconise, propose un reset des margin et padding sur le body
body {
    margin: 0;
    padding: 1em; /* Remettre à zéro si nécessaire. */

Pour le citer dans une discussion sur le forum à propos du reset sur l'élément * :
a écrit :
Je ne le conseille généralement pas, car on a vite fait d'appliquer ces règles très complètes pour tout «remettre à zéro», sans toujours les comprendre ou les garder à l'esprit quand on écrit l'essentiel de la feuille de styles par la suite. Mais là c'est une affaire de méthode, pas de bien/pas bien.

Autre citation :
a écrit :
Les marges et espacements des styles par défaut des navigateurs sont utiles, ils servent à rendre le contenu lisible, la sémantique des principaux éléments reconnaissable visuellement, etc. On peut bien sûr tout faire soi-même après les avoir remises à zéro, mais d'expérience on en oublie toujours un peu, et on se retrouve avec des contenus amorphes dans les situations qu'on n'avait pas prévu.

J'ai bien noté et indiqué que ces arguments portent sur le reset de l'élément *.

Mais question est donc : faire un reset de margin et padding sur l'élément * est déconseillé, mais pas sur le <body> ?
Modifié par krakkos (16 Feb 2009 - 10:19)
Modérateur
Bonjour,

L'impact est complètement différent. En éliminant les marges et paddings avec *, on élimine toutes les marges et paddings de tous les éléments. Si tu n'as pas pensé, par exemple, que l'utilisateur allait ajouter une liste ordonnée <ol> via son système de gestion de contenu, et que tu n'as pas redéclaré les styles du <ol> dans tes CSS, le <ol> ne s'affichera pas correctement.

En modifiant le margin et padding du body, cela n'affecte que la balise <body>, rien d'autres. Le résultat est bien précis, attendu et il ne peut pas y avoir de mauvaises surprises.
Modifié par Tony Monast (13 Feb 2009 - 17:18)
krakkos a écrit :

Mais question est donc : faire un reset de margin et padding sur l'élément * est déconseillé, mais pas sur le <body> ?
Eh bien oui. Smiley smile

* { ... } cible effectivement TOUS les éléments. BODY contient bien tous les autres éléments mais les propriétés margin et padding ne s'héritent pas contrairement à font par exemple. Pour plus d'infos à ce sujet lire Comprendre l'héritage et la parenté des styles CSS.


Edit: grillé ! Je me suis un peu endormi sur la réponse ! Smiley lol
Modifié par Heyoan (13 Feb 2009 - 17:23)
Modérateur
Bonjour Krakkos,

Merci de bien vouloir éditer ton sujet pour ajouter [Résolu] au début du titre. Smiley cligne
Petite question complémentaire : dans quel cas de figure il peut être intéressant de mettre un padding à 0 sur le <body> ?