Certains éléments HTML peuvent posséder par défaut des règles de stylisation, et donc des comportements visuels, définis par les feuilles de style du navigateur. Ces règles sont à garder à l'esprit lors d'une mise en page HTML / CSS ; elles peuvent être, au choix et au cas-par-cas, prises en compte, annulées ou remplacées.
En terme de manière d'occuper l'espace sur la page, on peut distinguer deux principales familles d'éléments HTML :
• Les éléments "blocs", occupant initialement toute la largeur disponible. Deux éléments blocs qui se suivent seront par défaut affichés l'un sous l'autre. Il est également possible de spécifier des dimensions pour ces éléments.
Exemples : p, h1-6, ul, li, div.
• Les éléments "en-ligne", dont la largeur dépendra de leur contenu. À part quelques exceptions, comme img, on ne peut pas spécifier leurs dimensions. Deux éléments en-ligne qui se suivent seront affichés l'un à côté de l'autre (sauf lorsque l'espace disponible sur la ligne courante est insuffisant).
Exemples : img, span, a, strong.
Un élément en-ligne placé à la suite d'un élément bloc sera renvoyé à la ligne, même si le bloc n'occupe pas toute la largeur disponible.
En CSS, ces deux comportements correspondent à deux valeurs données à l'attribut display. Par exemple, parmi les règles spécifiées par les feuilles CSS du navigateur, on trouvera div { display:block; [...] } et span { display:inline; [...] }.
Comme les styles CSS appelés dans l'en-tête d'un document ont la priorité sur ceux donnés par le navigateur, ces comportements par défaut sont modifiables. L'exemple suivant fonctionnera :
span { display:block; }
div { display:inline; }
L'attribut display peut prendre d'autres valeurs. Un comportement hybride entre "inline" et "block" est par exemple possible via display:inline-block. Un élément inline-block sera dimensionnable tout en respectant le comportement "inline" : il ne sera pas renvoyé à la ligne et ne forcera pas de retour à la ligne après lui (sauf espace horizontal insuffisant ou présence adjacente d'un élément bloc).
Parmi les autres valeurs possibles, la plus utile sera sans doute display:flex, que l'on peut appliquer à un élément pour contrôler la répartition et l'alignement de ses enfants, sur les deux axes (voir chapitre "4. Mise en page").
Un élément peut comporter une marge externe, une bordure et une marge interne. Celles-ci peuvent être définies pour - et par rapport à - chaque bord de l'élément.
• La marge externe, correspondant à la propriété CSS margin, définit l'espacement entre l'élément concerné et ses voisins. Dans le cas d'un élément inline, les marges verticales seront inopérantes.
• La marge interne, correspondant à la propriété CSS padding, définit un espace vide entre les bords de l'élément et la zone que peuvent occuper ses enfants.
• La bordure, correspondant à la propriété CSS border, est faite pour être visible et s'ajoutera entre les marges interne et externe.
Ces trois propriétés peuvent être modifiées de manière globale, pour appliquer la même valeur aux quatre bords de l'élément :
.element {margin:10px ; padding:5px}
Un traitement bord par bord est également possible via les suffixes -top , -bottom , -left et -right :
.element {margin-top:10px ; margin-bottom:20px; padding-top:30px}
À noter : une règle spécifique à un bord sera prioritaire par rapport à une règle globale. Ainsi l'élément suivant possèdera une marge externe de 10 pixels par rapport à ses bords haut, gauche et droite, et de 20 pixels en bas.
.element {margin:10px ; margin-bottom:20px}
Les syntaxes suivantes sont également utilisables ; on les appelle propriétés raccourcies (et l'exemple plus haut, modifiant les quatre bords à la fois, en fait partie) :
.element {margin: 10px 20px 15px 25px }
→ 10px en haut, 20px à droite, 15px en bas, 25px à gauche
.element { margin: 10px 15px }
→ 10px en haut et en bas, 15px à gauche et à droite
Comme la propriété border prend en compte une couleur et un style visuel, sa syntaxe est un peu différente :
.element { border: 1px dashed blue }
border étant également une propriété raccourcie, la même règle pourra se décomposer de la manière suivante :
.element { border-width:1px; border-style:dashed; border-color:blue }
Une expression raccourcie distincte peut également être appliquée pour chaque bord :
.element { border-left:2px solid black; border-top:4px dotted brown }
Enfin, les spécifications d'épaisseur, de style visuel et de couleur peuvent également être détaillées bord par bord. L'exemple précédent peut s'écrire :
.element {
border-left-width: 2px;
border-left-style: solid;
border-left-color: black;
border-top-width: 4px;
border-top-style: dotted;
border-top-color: brown;
}
Lorsqu'un élément est dimensionné (via ses attributs width et height), l'épaisseur cumulée des padding, border et margin peut être prise en compte de deux manières différentes, selon la valeur donnée à l'attribut box-sizing de l'élément.
• Pour un élément avec box-sizing:content-box (valeur par défaut), l'épaisseur sera ajoutée aux dimensions spécifiées pour l'élément. L'exemple suivant :
.boite {width:100px; margin:10px; padding:10px; border-width:2px;}
→ sera affiché au final avec une largeur de 144 pixels. Aux 100 pixels spécifiés s'ajoutent deux fois 10 + 10 + 2 pixels.
• Pour un élément avec box-sizing:border-box, l'épaisseur sera intégrée aux dimensions spécifiées pour l'élément. Dans l'exemple suivant :
.boite {
box-sizing:border-box;
width:100px; margin:10px; padding:10px; border-width:2px;
}
→ l'élément sera affiché au final avec une largeur de 100 pixels comme spécifié. Par contre ses éléments enfants ne disposeront plus que de 56 pixels d'espace en largeur, car aux 100 pixels spécifiés sont retirés deux fois 10 + 10 + 2 pixels.
Dans certains cas, les marges externes affichées par le navigateur pour un élément sembleront ne pas correspondre aux règles spécifiées. En effet, les marges verticales de deux éléments peuvent "fusionner" lorsque les conditions sont réunies.
→ Si deux éléments blocs se suivent, la marge inférieure du premier et la marge supérieure du second ne s'additionneront pas : seule la plus grande des deux sera conservée.
→ Si un élément bloc a pour premier enfant un autre élément bloc, la marge supérieure de ce dernier ne sera pas matérialisée entre son bord et celui de l'élément parent, mais fusionnée à la marge supérieure du parent, c'est à dire que celle-ci sera équivalente à la plus grande des deux valeurs spécifiées, et que les bords supérieurs des deux éléments seront accolés. Ce comportement s'appliquera sur plusieurs niveaux d'imbrication.
Dans le second cas, le phénomène peut être annulé en ajoutant un padding ou une bordure (d'épaisseur minimum 1 pixel) sur le bord supérieur de l'élément parent.
Dans une arborescence HTML, chaque élément hérite d'une partie des règles de style de son élément parent. Si on spécifie pour un élément une règle portant sur une propriété "héritable" (comme par exemple color, font-size ou text-align), la règle sera appliquée à tous les enfants directs et indirects de cet élément, jusqu'à ce qu'un des éléments enfants soit soumis à une nouvelle règle pour cette propriété, dont ses enfants hériteront.
/* CSS : */
.rouge { color:red }
.bleu { color:blue }
<!-- HTML : -->
<div class = "rouge">
<p>
Ce texte sera rouge
<span>Ce texte sera rouge</span>
</p>
<p class = "bleu">
Ce texte sera bleu
<span>Ce texte sera bleu</span>
</p>
</div>
L'héritage dispense de certaines répétitions :
• Il devient inutile de re-appliquer certaines classes au fil d'une arborescence :
<div class = "rouge">
<p class = "rouge" >
Ce texte était déjà rouge
<span class = "rouge" >Ce texte était déjà rouge</span>
</p>
<p class = "bleu">
Ce texte sera bleu
<span class = "bleu" >Ce texte était déjà bleu</span>
</p>
</div>
• Ou de multiplier les sélecteurs CSS :
.rouge , .rouge p , .rouge span { color:red }
.bleu , .bleu span { color:blue }
Pour les propriétés non-héritées, c'est-à-dire pour lesquelles ce comportement ne s'applique pas par défaut (comme par exemple border, margin ou padding), il est possible de forcer l'héritage, via la valeur inherit.
Par exemple, un élément pour lequel on définit la règle border:inherit obtiendra la même bordure que son élément parent.