Retrouvez cet article dans : Linux Pratique 38
En (X)HTML, on distingue deux types d'éléments permettant de décrire la structure et le contenu de la page : les éléments de type bloc et les éléments de type en-ligne (ou inline). Il faut tenir compte de ce type au moment où l'on applique certaines propriétés CSS ; en effet, certaines ne s'appliquent qu'à l'un ou l'autre type. Par ailleurs, le comportement de ces deux types diffère sur plusieurs points...
Description
Les éléments de type en-ligne génèrent une boîte au sein d'une ligne de texte sans rompre le flux du texte. Par exemple, les éléments <a>, <img>, <abbr> et <span> sont des éléments de type en-ligne. Leur rôle est globalement d'apporter un plus au contenu textuel. Par conséquent, les éléments en-ligne peuvent apparaître au sein d'un autre élément sans en bouleverser l'affichage.
Les éléments de type bloc génèrent une boîte qui occupe tout l'espace de l'élément parent. Un élément de type bloc ne peut avoir, par défaut, d'autre élément à ses côtés. C'est comme s'il était précédé et suivi d'un passage à la ligne. Les éléments <h1> à <h6>, <p>, <div>, <ul>, <li>, <table>, etc., sont des éléments de type bloc. Ce sont eux qui constituent toute la structure d'une page Web, puisqu'ils permettent en quelque sorte de découper celle-ci en plusieurs zones (plusieurs boîtes) distinctes.
Par défaut, les balises en-ligne ont des marges internes (padding) et externes (margin) inexistantes. Au contraire, la plupart des éléments bloc (en fait, tous sauf la balise neutre <div>) possèdent des marges internes et externes non nulles. Attention, car ces marges diffèrent selon le navigateur utilisé ! Par précaution, et pour garantir la compatibilité de vos pages Web avec la totalité des navigateurs, mieux vaut fixer ces marges à zéro ou leur attribuer une valeur précise.
Mise en forme
Un élément de type bloc génère une boîte rectangulaire que l'on peut styliser et qui délimite l'espace occupé par l'élément. Rappelons ici que les propriétés width et height (respectivement largeur et hauteur) se rapportent uniquement à la zone de contenu ; les bordures et marges leur sont ajoutées.
La propriété CSS text-align est prévue pour s'appliquer sur un élément bloc : elle permet de contrôler l'alignement (gauche, droite, centré, justifié) de tous les éléments de type en-ligne contenus dans ce bloc.
Les éléments de type en ligne peuvent recevoir la propriété line-height.
Positionnement
Les éléments de type en-ligne se positionnent toujours les uns à côté des autres. Au contraire, les éléments de type bloc se positionnent toujours les uns en dessous des autres (Fig. 1). Bien entendu, il s'agit là de leur comportement par défaut.
Fig. 1 : En jaune, éléments <p> de type bloc par défaut ; en vert, éléments <a> de type en-ligne par défaut.
Fig. 2
Fig.3
En effet, la propriété display permet justement de définir le type d'affichage d'un élément. La valeur inline permettra à un élément de type bloc d'apparaître comme un élément en-ligne ; la valeur block permettra à un élément de type en-ligne d'apparaître comme un élément de type bloc (Fig. 2). On utilise souvent cette propriété pour les listes d'éléments (<ul> et <ol>), dont les items (<li>) sont listés les uns en dessous des autres par défaut (Fig. 3).
Imbrication
Un élément de type bloc pourra contenir un ou plusieurs élément(s) de type bloc et/ou en-ligne. Les éléments en-ligne, en revanche, ne peuvent contenir qu’un ou plusieurs élément(s) de type en-ligne également :
<div><p>...</p></div> <p>...<a href="">...</a>...</p>
Cela dit, il s'agit ici de règles générales, mais on pourra noter quelques exceptions méconnues et néanmoins
importantes :
 <body>ne peut pas être parent direct de caractères ou d'éléments de type en-ligne. <form>ne peut être parent direct que d'éléments blocs. Ne peut pas contenir d'autres éléments<form>. <h1>,<h2>,...<h6>ne peuvent être parents que d'éléments en-ligne. <ol>et<ul>ne peuvent contenir directement que des éléments de liste<li>. <p>ne peut être parent que d'éléments en-ligne. <a>ne peut pas contenir d'autres éléments<a>. <img>ne peut pas contenir d'éléments et ne peut pas être contenu dans un élément<pre>.
Une liste complète des règles d'imbrications est explicitée à cette adresse : http://blog.alsacreations.com/2004/09/09/58-parents-et-enfants
Par ailleurs, il est possible d'affecter une dimension précise aux éléments de type bloc. Les éléments de type en-ligne, quant à eux, n'ont pas de dimensions à proprement parler, mis à part certaines balises dites « remplacées » comme <img>, <textarea>, etc. Les autres éléments n'occupent que la place minimum dont ils ont besoin : leur taille est ainsi déterminée par le texte ou l'élément qu'ils contiennent.
Lien :
Openweb, « Boîtes bloc, boîtes en ligne et propriété display » : http://openweb.eu.org/articles/initiation_display/
