Les niveaux ou types d’éléments en CSS

Le W3C (World Wide Web Consortium) distingue deux grands types d’éléments HTML, les bloc-level elements et les inline-level elements. Cette catégorisation permet de regrouper les éléments HTML en fonction de leur comportement par défaut à l’affichage et par rapport au flux du document. En français, nous parlons de type bloc ou en ligne.

Les éléments de niveau block

Les éléments de niveau ou de type block, les plus courants, sont les suivants : <p>, <div>, <h1>, <h2>, <section>, <article>, etc. Les éléments de type block sont dimensionnables et sont seuls sur leur « ligne ».

Dimensions par défaut

Par défaut, la largeur des éléments de niveau block est définie à 100% et la largeur définie sur auto. Cela implique que ce type d’élément va occuper toute la largeur disponible, c’est à dire plus précisément toute la largeur de l’élément conteneur, par défaut body. La hauteur va, pour sa part, s’adapter en fonction du contenu. Ainsi un élément <p>, par exemple, sera plus ou moins haut en fonction du texte qu’il va contenir. Les éléments de type block ont donc, par défaut, des dimensions qui s’adaptent, comme vous pouvez le voir dans l’animation ci-dessous où la largeur de la fenêtre du navigateur est modifiée.

p { 
    background-color: gold;

    /* Dimensions par défaut */
    width: 100%;
    height: auto;
}

Dimensionnement

Les dimensions des éléments de type block sont modifiables en CSS avec les propriétés height (hauteur) et width (largeur). Dans l’illustration suivante, l’élément <p> a été dimensionné en CSS.

/* Exemple de dimensionnement */
p { 
    background-color: gold;
    width: 70%;
    height: 250px;
}

En fonction de l’unité de mesure utilisée lors du dimensionnement, le comportement des blocs va être différent :

• Pourcentage : avec l’unité %, les dimensions du bloc vont s’adapter en fonction de la taille de l’élément conteneur.
• Pixel : avec l’unité px, les dimensions seront fixes, quelles que soient les dimensions du conteneur ou de la fenêtre du navigateur. Les éléments peuvent même déborder de leur conteneur si celui-ci est plus étroit (ou moins haut).
• Viewport : avec les unités vh (viewport height) ou vw (viewport width), les dimensions vont d’adapter aux dimensions de la fenêtre du navigateur ou plus précisémment du Viewport.

Seul sur une nouvelle ligne

Dire que les éléments de type block sont seuls sur une ligne ou commencent sur une nouvelle ligne signifie que quelle que soit la largeur d’un bloc, il se trouvera en début de ligne et la suite s’affichera en dessous. Les blocs sont donc toujours seuls sur leur ligne (comportement modifiable en CSS). Comme vous pouvez le voir dans la capture suivante, les deux blocs qui ont été dimensionnés pourraient tout à fait s’afficher côte à côte, mais ce n’est pas le cas, ils restent l’un en dessous de l’autre.

Les éléments de niveau inline

Les éléments de type inline les plus courants sont <a>, <span>, <strong> et <em>.

Non dimensionnable

Les éléments de type inline ne sont pas dimensionnables. Ils auront systématiquement la dimension de leur contenu. Pour illustrer ce principe, voici le code d’un paragraphe contenant un élément <strong> de type inline.

<p>Lorem ipsum, dolor sit amet <strong>consectetur adipisicing</strong> elit. Hic a, esse obcaecati impedit quibusdam quas necessitatibus soluta vero exercitationem perferendis temporibus est repellat non pariatur minima quam laboriosam cupiditate labore.</p>

Voici maintenant du code CSS contenant la propriété background-color pour colorer l’élément <strong> afin de le délimiter visuellement et les propriétés width et height pour lui donner des dimensions.

strong { 
    background-color: gold;    
    width: 1000px;
    height: 500px;
}

Vous remarquez maintenant, dans la capture d’écran, que la taille d’affichage de l’élément <strong> est uniquement délimitée par son contenu, en l’occurrence le texte consectetuc adipising. Les propriétés width et height n’ont donc aucun effet.

Il n’est donc pas possible de dimensionner des éléments de type inline. Pour pouvoir leur attribuer une dimension, il sera nécessaire de modifier le type d’affichage avec la propriété CSS display.

Pas de retour à la ligne

Contrairement aux éléments de type block, les éléments inline ne créent pas retour à la ligne.

Particularités des marges supérieures et inférieures

Les éléments de type inline supportent les marges externes à gauche et à droite mais pas au-dessus et au-dessous, la propriété margin ne s’applique donc que partiellement (margin-top et margin-bottom ne s’appliquent pas du tout).

strong { 
    background-color: gold;
    margin: 2rem;
}

Les marges internes avec la propriété padding, quant à elle, s’appliqueront dans les quatre directions. Mais comme vous pouvez le voir dans l’exemple, si les marges internes s’appliquent comme pour un élément de type block sur la gauche et la droite, le comportement va être différent pour le haut et le bas où l’élément va déborder sur son environnement.

strong { 
    background-color: gold;
    padding: 2rem;
}

Attention à l’imbrication

Les éléments de type block peuvent contenir d’autres éléments de type block et/ou des éléments de type inline.

Par contre, les éléments de type inline ne doivent pas contenir d’élément de type block.

Selon les spécifications du W3C, lorsque un élément inline contient un élément de type block, l’élément inline est alors cassé autour de l’élément de type block. Les morceaux de l’élément inline sont alors entourés de boîtes anonymes. Pour en savoir plus sur le sujet, vous pouvez consulter la spécification du W3C https://www.w3.org/TR/2009/CR-CSS2-20090908/visuren.html#anonymous-block-level.

Le cas des éléments remplacés

Les éléments remplacés sont des éléments dont le contenu n’est pas impacté par les CSS du document. Les dimensions et la position par exemple peuvent être manipulés, mais pas le contenu lui-même de l’élément qui n’est pas modifiable.

L’exemple d’une image est assez simple à comprendre. Si l’on peut dimensionner et ajouter une bordure à une image avec CSS, il n’est pas possible en CSS de modifier le contenu même de l’image (en dehors du cas particulier des images vectorielles).

Les éléments <img> <video> ou <iframe> sont des éléments remplacés.

Ces éléments remplacés sont de niveau inline, mais ont un comportement hybride à l’affichage. Ils vont ainsi avoir des caractéristiques issues des deux catégories.

• Caractéristiques d’élément de niveau block : ils sont dimensionnables avec les propriétés CSS width et height et les marges s’appliquent.
• Caractéristiques d’élément de niveau inline : ils ne sont pas isolés sur une ligne.

img { 
    width: 100px;
}

La propriété CSS display

La propriété CSS display permet de modifier le comportement d’un élément HTML à l’affichage. Il est ainsi possible de transformer un élément block en élément inline ou un élément inline en élément block. De nombreuses autres possibilités sont possibles avec cette propriété display.

Voici par exemple, un élément <strong> qui s’affiche comme un élément de type block grâce à la déclaration CSS display: block;.

strong { 
    background-color: gold;
    display: block;
}

La propriété display supporte de nombreuses autres valeurs d’affichage https://developer.mozilla.org/fr/docs/Web/CSS/display.

Répartitions des balises par niveau

Sauf mention contraire*, l'article Les niveaux ou types d’éléments en CSS et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.