Display

L’affichage (display, en anglais) en CSS est une notion très importante. Cette notion permet de comprendre comment les éléments HTML sont agencés lorsqu’il n’y a pas de CSS qui entre en jeu, mais cela permet également de mieux comprendre et contrôler la mise en page en CSS.

La propriété display

La propriété display permet de définir si et comment un élément HTML est affiché à l’écran.

Chaque élément HTML dispose d’une valeur display par défaut, en fonction du type d’élément. Pour la plupart des éléments HTML, la valeur par défaut attribuée à la propriété display est block ou inline.

Les éléments “block-level”

Un élément HTML dit “block-level” (donc disposant de la propriété CSS “display: block;”) commence toujours sur une nouvelle ligne et prend toute la largeur disponible. Cela signifie que l’élément est étiré de la gauche vers la droite, tant qu’il reste de la place.

Les éléments block ont la possibilité de se voir attribuer une largeur définie et fixe.

Voici une liste non exhaustive d’éléments courants en HTML de type “block-level” :

• <div>
• titres <h1> à <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

Les éléments “inline level”