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

Pour comprendre les bases de la mise en page en CSS, nous distinguerons deux comportements d’affichage : les éléments de niveau bloc (block-level elements) et les éléments de niveau en ligne (inline-level elements).

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, les propriétés width et height ont la valeur auto. Dans le flux normal, un bloc comme un paragraphe occupe généralement toute la largeur disponible dans son conteneur, tandis que sa hauteur s’adapte à son 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: auto;    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 : une largeur en pourcentage est calculée par rapport à la largeur du conteneur. Pour les hauteurs en pourcentage, le résultat dépend notamment de la manière dont la hauteur du conteneur est définie.
• 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 sont calculées en fonction de la largeur et de la hauteur du viewport, c’est-à-dire de la zone d’affichage de la page.

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. Dans le flux normal, les blocs se placent les uns sous les autres, même lorsque leur largeur leur permettrait de tenir côte à côte. D’autres modes de disposition, comme Flexbox ou Grid, permettent de modifier cette organisation.

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 inline contenant du texte, comme <span>, <strong> ou <em>, ne peuvent pas être dimensionnés avec width et height. Leur affichage dépend de leur contenu, qui peut se répartir sur plusieurs lignes. Nous verrons plus loin le cas particulier des éléments remplacés, comme les images.

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 consectetur adipisicing. Les propriétés width et height n’ont donc aucun effet.

Pour dimensionner ces éléments e type inline avec width et height, il faut modifier leur comportement d’affichage, par exemple avec propriété display.

Pas de retour à la ligne

Contrairement aux éléments de type block, les éléments inline ne provoquent pas de retour à la ligne avant ou après eux. Leur contenu peut toutefois se poursuivre sur la ligne suivante lorsque l’espace disponible est insuffisant.

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

Pour ces éléments inline, les marges externes gauche et droite sont prises en compte, tandis que margin-top et margin-bottom n’ont pas d’effet sur la disposition.

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

Les marges internes avec la propriété padding, quant à elles, 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 padding supérieur et inférieur est bien appliqué, mais il n’augmente pas l’espacement entre les lignes. Le fond et les bordures de l’élément peuvent donc empiéter sur les lignes voisines.

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

Le cas des éléments remplacés

Un élément remplacé affiche un contenu traité comme un objet distinct par le navigateur : une image, une vidéo ou une page intégrée, par exemple. CSS permet de régler les dimensions et la présentation de sa boîte, sans mettre en forme son contenu comme le texte d’un paragraphe.

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.

Les éléments <img>, <video> et <iframe> sont généralement affichés en ligne par défaut. Ils acceptent néanmoins des dimensions et des marges dans les quatre directions.

• 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 de type 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 propose également d’autres modes d’affichage : https://developer.mozilla.org/fr/docs/Web/CSS/display.

Répartition 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.