Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

Éléments de niveau bloc

En CSS, le contenu qui participe à la mise en page en bloc est appelé contenu de niveau bloc.

Dans une mise en page en bloc, les boîtes sont disposées les unes après les autres, verticalement, en commençant par le haut du bloc conteneur. Le bord extérieur gauche de chaque boîte touche le bord gauche du bloc conteneur. Un élément de niveau bloc commence toujours sur une nouvelle ligne. En mode d'écriture horizontal, comme l'anglais ou l'arabe, il occupe tout l'espace horizontal de son élément parent (contenant) et un espace vertical égal à la hauteur de son contenu, créant ainsi un « bloc ».

Note : Le comportement ci-dessus de la mise en page en bloc change si le writing-mode du bloc conteneur est défini sur une valeur autre que la valeur par défaut.

Note : Les éléments HTML (pour HyperText Markup Language en anglais) étaient historiquement classés comme éléments « de niveau bloc » ou « en ligne ». Cette caractéristique de présentation est désormais spécifiée par CSS.

Exemples

Dans cet exemple, deux éléments paragraphe (<p>) sont placés dans un <div>.

html
<div>
  <p>
    Ceci est le premier paragraphe. La couleur d'arrière-plan de ces paragraphes
    a été modifiée pour les distinguer de leur élément parent.
  </p>
  <p>Ceci est le second paragraphe.</p>
</div>

Les éléments paragraphe (<p>) sont de niveau bloc par défaut. C'est pourquoi ils sont affichés en mise en page en bloc :

Voir aussi