CSS et mise en page - 2 Sortons en boîte

Aparté : il faudrait vraiment que je réfrène mon penchant aux jeux de mots calamiteux…

Introduction

Tous les bouts de texte ou d'image qui figurent dans la fenêtre d'un navigateur sont contenus dans ce que la spécif CSS appelle des  box , terme audacieusement rendu par  boîte  dans la traduction française – même si vous ne le saviez pas, vous le saviez tout de même tant ça vous semblait naturel.

Note pour les lecteurs OverBloggiens : les modules d'un blog sont de classe .box, n'allez pas croire que le nom de cette classe leur donne un statut particulier.

Un peu de vocabulaire : balises, éléments, boîtes

Vous le savez (non ?), une page HTML est un fichier de simple texte (le code source) parsemé de  repères  (souvent appelés  balises ).  Balise  est une notion purement typographique et syntactique : c'est ce qui va de  <  à  > , c'est un signe, comme un panneau routier à l'entrée ou la sortie d'une ville. Ces balises peuvent être  auto-suffisantes  comme <br />, <img />, <hr /> ou aller par paires  balise ouvrante / balise fermante , cas le plus commun.

Quel que soit leur type elles définissent des  éléments  de document. Ces éléments, qui sont aux balises ce que la ville est aux panneaux routiers, s'emboîtent les uns dans les autres selon l'organisation arborescente évoquée dans le précédent article.

Les éléments engendrent les  boîtes . Le plus souvent, un élément n'engendre qu'une seule boîte : les sous-boîtes sont engendrées par les sous-éléments éventuellement inclus dans l'  ancêtre  mais pas par celui-ci. Certains éléments n'engendrent aucune boîte : un élément script n'occupe aucun pixel à l'écran, il en va de même pour head, pourtant ce sont des éléments du document comme les autres. Quelques éléments en engendrent plusieurs : un li engendre une boîte principale pour le texte et une boîte secondaire pour la puce – c'est tout de même un cas un peu spécial.

Résumé :

1. balise : signalisation du texte HTML ;
2. éléments : interprétation du balisage par le navigateur ;
3. boîtes : rendu visuel des éléments par le navigateur.

Le rôle du CSS

Quand on ne lui dit rien, le navigateur arrange les boîtes à son idée, qui est claire mais dépouillée. Le CSS est là pour qu'il les arrange à votre idée, charge à vous de l'exprimer clairement ! Le CSS impacte l'aspect des boîtes et leur disposition à l'écran, il ne change rien aux relations entre éléments, à l'arborescence du document.

Au contraire, il s'appuie sur elle pour faire son travail, nous n'avons donc pas fini d'en reparler.

Géométrie d'une boîte : un jeu de cubes

Vous allez lire un plagiat à peu près pur du début du chapitre 8 de la spécification CSS.

Une boîte est, pour l'essentiel, un rectangle ( pour l'essentiel  parce qu'il y aura évidemment des finesses, sinon où serait le plaisir ?).

Au coeur de ce rectangle se trouve le  contenu  de l'élément, que ce contenu soit directement tiré du source HTML (texte, on parle d'élément  non remplacé ) ou qu'il provienne d'une autre source (image, vidéo, applets divers et variés… élément  remplacé ).

Autour de ce  petit  rectangle intérieur vient se coller d'abord une couche de  padding  (que la VF traduit par  espacement , mais je préfère  remplissage , un peu comme les chips de polystyrène dans un colis postal. Si quelqu'un connaît un terme plus directement issu du vocabulaire des professionnels de la mise en page ?). Ensuite vient une épaisseur de  border  ( bordure ) et pour finir une épaisseur de  margin  ( marge ).

Vous avez déjà eu maille à partir avec ces propriétés, vous savez qu'elles peuvent se définir individuellement pour chacun des quatre côtés, qu'elles peuvent être absentes (valeurs  0 ,  0px ,  none , etc.)… on ne va pas insister.

La figure ci-dessous, tirée de la spécification W3C, résume le propos :

Les quatre rectangles emboîtés apparaissent clairement. Ne vous laissez pas tromper par les quatre contours, les quatre  bords  dessinés : ils n'apparaissent pas à l'écran, ils ne sont là que pour préciser le vocabulaire. En particulier,  bord de la bordure  n'est pas un pléonasme ou une plaisanterie (ils sont sérieux, au W3C – pas comme ici) : la bordure peut avoir une épaisseur, que rien n'empêche d'être importante, elle a donc une limite intérieure et une limite extérieure, tout comme le  padding  et le  margin . Seul le contenu, au centre du dispositif, n'a qu'une limite extérieure et pas de limite intérieure (ben oui, puisque c'est lui l'intérieur…).

La largeur du remplissage et de la bordure est positive ou nulle, alors que celle de la marge peut être négative. Dans ce cas la  boîte de bordure  déborde de la  boîte de marges  sur le ou les côtés où cette marge est négative. Visuellement, ceci fera empiéter l'élément sur ses voisins ou bien ses voisins sur lui – nous aurons l'occasion d'en reparler.

Parlons couleur. Le texte s'écrit avec color, la bordure avec border-color : facile.

Quant au fond : le contenu, le remplissage et la bordure ont le même fond, défini par background, background-color ou background-image pour l'élément. Même la bordure ? Même la bordure : entre des pointillés ou des tirets on voit le même fond que pour le remplissage et le contenu.

Les marges, à l'opposé, sont toujours transparentes.

Ça va, jusqu'ici ?

Géométrie d'une boîte : hauteur et largeur

On peut difficilement y échapper quand il est question de rectangles…

Ces deux propriétés s'appellent, sans surprise, width et height. Ce sont les dimensions, quand on veut les préciser, du contenu.

Piège : du contenu – et pas du total ! Ce ne sont pas des dimensions  hors-tout  ! Comme le remplissage et la bordure, leur valeur peut être nulle mais pas négative. Les dimensions  hors-tout  sont la somme de la largeur/la hauteur du contenu, des remplissages, bordures et marges dans la direction étudiée (horizontale ou verticale).

Géométrie d'une boîte : ça y est, on commence à finasser

Il pourrait sembler plus logique que width et height désignassent (pardon ! l'imparfait du subjonctif est une espèce menacée !) ces dimensions hors-tout. C'est d'ailleurs ainsi que se comporte Internet Explorer, seul de son espèce, quand on ne précise pas le DOCTYPE de la page HTML – rassurez-vous, OverBlog produit un HTML parfaitement blindé avec un DOCTYPE impeccable.

Apparemment plus logique : connaissant les dimensions hors-tout, on enlève marge, bordure et remplissage, et le contenu c'est ce qui reste ; on va de l'extérieur vers l'intérieur. Mais plus compliqué : que faire si marge, bordure et remplissage sont trop importants, s'il ne reste que zéro ou, pire, moins que zéro pour le contenu ? Il est plus simple de construire le bloc de l'intérieur vers l'extérieur.

C'est important, ça ? C'est pas un truc pour grand malade comme l'auteur de cet article (il n'y a pas de mal, j'ai l'habitude) ? Ça sert vraiment à quelque chose pour faire un blog ?

Exercez-vous donc sur cette petite démonstration, vous y verrez plus clair.

Margin ou padding ?

Question pratique et fréquente : pour cadrer un élément, vaut-il mieux jouer sur les marges ou sur les remplissages ? La réponse est évidemment : ça dépend.

Nombreux sont les designs où seule la page globale est munie d'un fond (couleur unie ou image, aucune importance ici) où s'arrangent les éléments, sans bordures sauf pour quelques grands pavés. Dans ce cas (pas de bordure, tout le monde est transparent) la différence entre marges et remplissages semble bien oiseuse – et elle l'est peut-être. Bidouillage et approximations successives suffisent pour obtenir le résultat désiré.

Dès qu'on donne à l'élément une bordure et/ou un fond, la différence entre marge et remplissage est évidente : l'un est transparent et pas l'autre, l'un est à l'extérieur de la bordure et l'autre à l'intérieur. Il est facile de choisir selon ce qu'on veut obtenir.

Margin ou padding : c'est vraiment différent ?

Jusqu'ici, le remplissage apparaît comme le symétrique de la marge du côté intérieur de la bordure. On l'appelle d'ailleurs quelquefois  marge intérieure , mais je trouve l'expression impropre et trompeuse.

Voyons ça. Laissons de côté les questions de couleur et de fond, purement cosmétiques, il y a plus important.

Contenu, remplissage et bordure ont toujours des dimensions positives : leur effet sur la mise en page est toujours de  pousser  les voisins pour faire de la place. Les marges, elles, permettent tout autant de pousser encore un peu plus ces voisins que de les rapprocher si elles sont négatives, voire de les faire empiéter sur le pavé contenu - remplissage - bordure.

En somme, on peut se figurer contenu, remplissage et bordure comme  du matériau , un pavé rigide dont on détermine l'aspect (fond et couleur) et les dimensions (width/height, padding, border-width), et que l'on  cale  par rapport au reste de la page en jouant sur les marges transparentes, positives ou négatives.

Cela me semble plus adapté que de raisonner en partant d'un contenu (texte ou autre) qu'on cherche à caler avec une cuillère de padding ou une goutte de margin, en choisissant au petit bonheur.

La fusion des marges verticales

Une autre caractéristique importante distingue les marges des autres propriétés géométriques : les marges verticales peuvent fusionner. Ah ? Quand deux éléments sont l'un au-dessus de l'autre, la distance entre leurs  bords de bordures  (je confirme : ce n'est pas un gag) n'est pas le total de la marge basse de l'un et de la marge haute de l'autre, mais le plus grand de ces deux nombres. Quel intérêt, en pratique ? Immense : vous ne vous êtes jamais étonné de voir entre deux éléments d'une liste le même espace qu'en haut ou bas de la liste, plutôt que le double ? Voilà, c'est ça la fusion des marges.

Le plus simple est d'aller voir cette démonstration élémentaire et de faire un peu joujou avec les boutons (j'ai même prévu des marges négatives). Vous remarquerez que les bordures et les remplissages, eux, ne fusionnent jamais.

Il y a un effet inattendu mais logique : les marges verticales fusionnent aussi lorsque l'un des éléments est inclus dans un autre et qu'aucun remplissage ou bordure du contenant ne vient isoler le contenu du monde extérieur. C'est une farce que j'ai découverte en peaufinant une fois de plus la mise en page de ce blog, le plus simple est d'aller voir vous-même ce modèle réduit. Amusez-vous, interprétez ce que vous verrez et relisez ce que j'écris sur la différence entre la marge et le reste.

En pratique, on fait comment ?

Gros bon sens : si le fond est le même pour tout le monde et qu'il n'y a pas de bordure ni de combinaison tordue, pourquoi choisir padding:1em plutôt que margin:1em ?

Ne comptez pas sur moi pour vous dire que l'un est meilleur que l'autre, mais vous pouvez déjà noter quelques règles de bon sens (ce qui suit n'est ABSOLUMENT PAS une norme ! Juste les enseignements de l'expérience) :

• raisonnez comme si vous traciez des bordures ou que vous mettiez des fonds de couleur, même si vous n'en mettez pas tout de suite. S'il vous semble que la bordure ne devrait pas être au contact du contenu, que le fond devrait s'étendre autour du contenu, c'est qu'il y a besoin de remplissage ;
• si vous en êtes à rajouter des marges négatives simplement pour compenser un remplissage trop important, réfléchissez : on doit pouvoir faire plus simple ;
• si la marge est positive d'un côté et négative de l'autre, vous êtes en train de chercher à décaler l'élément par rapport à lui-même. Un position:relative serait peut-être plus simple et plus facile à ajuster ;
• de manière générale, les marges négatives ne devraient s'employer qu'après réflexion, sûrement pas comme des corrections hâtives,  quick and dirty  ;
• de manière générale, réfléchissez… Essayez de vous faire une idée nette de ce que vous désirez, griffonnez des croquis, des rectangles, des flèches… Le CSS est un truc de maquettiste, de typographe, de designer, pas d'informaticien, et c'est très bien comme ça ;
• faites votre cuisine en local ou sur un blog de test, vous économiserez pas mal de temps et d'adrénaline.

Pas compris ? Pas d'accord ? Parlez-en en commentaire.

---

Entrée en matière Inline et block

• 1 Entrée en matière
• 2 Sortons en boîte
• 3 Boîtes en-ligne et boîtes de bloc
• 4 Flotter absolument dans un flux relatif ?
• 5 Fluctuat nec mergitur
• 5bis Fluctuat sed merditur
• 6 Plus c'est moins grand, moins c'est plus petit. Vous voyez ?
• 7 Le pifomètre et l'absolu
• 8 Recette du mille-feuilles