Comment utiliser la propriété CSS display ?

La propriété CSS display permet de modifier l'affichage et le comportement d'un élément HTML. Un élément en ligne, par exemple, devient un élément de bloc en lui attribuant la propriété display: block dans le code CSS ; autre exemple, la propriété display: none attribuée à un paragraphe indique au navigateur de ne pas l'afficher à l'écran. L'intérêt de cette propriété consiste pour le webdesigner à travailler sur une page web dans CSS, sans toucher à son code HTML. Il peut ainsi tester plusieurs mises en forme différentes, ou mettre régulièrement à jour la page web, en gardant le code HTML intact. La propriété CSS display peut prendre de nombreuses valeurs. Elles sont classées en six catégories pour faciliter la compréhension et l'usage.

Comment utiliser la propriété CSS display ?

Pour utiliser la propriété CSS display, il faut identifier l'élément avec un attribut class dans le code HTML, lui attribuer la propriété display dans le code CSS et indiquer la valeur souhaitée. La valeur est exprimée avec un mot-clé.

Exemple d'utilisation de la propriété CSS display pour masquer un paragraphe :

• Code HTML : < p class="nom" >Paragraphe à masquer.< /p >.
• Code CSS : .nom { display: none }.

Six catégories de valeurs existent pour indiquer au navigateur comment modifier l'affichage et le comportement par défaut de l'élément HTML.

Les valeurs de type display-outside

Les valeurs de type display-outside définissent comment l'élément s'insère dans le flux du contenu. La propriété CSS display peut prendre trois valeurs de type display-outside :

• display: block transforme l'élément en élément de bloc. L'élément s'insère alors dans le contenu comme une section distincte, avec un saut de ligne avant et après.
• display: inline, à l'inverse, transforme l'élément en élément en ligne. Ainsi, l'élément qui suit s'affiche sur la même ligne.
• display: run-in adapte le comportement de l'élément en fonction des éléments qui l'entourent. Cette valeur n'est pas encore prise en charge par les navigateurs.

Exemples d'utilisation des propriétés CSS display de valeurs block et inline :

See the Pen css-display_block by HubSpot France (@HubSpot-France) on CodePen.

See the Pen css-display_inline by HubSpot France (@HubSpot-France) on CodePen.

La propriété CSS display: list-item

La valeur list-item transforme l'élément en élément de liste. Pour personnaliser l'aspect de la puce, il faut ajouter une propriété CSS list-style-type.

Dans cet exemple, la propriété CSS display: list-item transforme les titres en éléments de liste : les titres de premier niveau forment une liste numérotée, les titres de deuxième niveau s'affichent sous forme de liste à puce.

See the Pen css-display_list-item by HubSpot France (@HubSpot-France) on CodePen.

Les valeurs de type display-inside

Les valeurs de type display-inside déterminent la disposition du contenu de l'élément. La propriété CSS display peut prendre six valeurs de type display-inside : display: flow, display: flow-root, display: table, display: flex, display: grid et display: ruby.

La valeur table, par exemple, crée un élément de bloc dont le contenu se comporte comme un tableau, alors que la valeur grid crée un élément de bloc dont le contenu est organisé sous forme de grille. Cet exemple illustre comment la disposition du contenu du bloc change en fonction de la valeur display-inside de la propriété CSS display.

See the Pen css-display_table-grid by HubSpot France (@HubSpot-France) on CodePen.

Les valeurs de type display-internal

Les valeurs de type display-internal permettent d'enrichir le niveau d'information de la propriété CSS display lorsqu'elle prend les valeurs table ou ruby. Dans l'exemple précédent, la propriété CSS display: table a organisé le contenu sous forme de tableau. En ajoutant la valeur table-footer-group à un élément, il est possible de positionner cet élément en pied de tableau :

See the Pen css-display_table-footer-group by HubSpot France (@HubSpot-France) on CodePen.

Les valeurs de type display-box

Les valeurs de type display-box indiquent au navigateur de ne pas afficher de boîte ou d'élément. La propriété CSS display prend deux valeurs de type display-box au choix : display: contents ou display: none.

À noter que la propriété CSS display: none fonctionne différemment de la propriété CSS visibility: hidden. Alors que la seconde conserve l'espace de l'élément intact sans afficher son contenu, la première permet de faire disparaître le contenant et le contenu de l'élément. Illustration :

See the Pen css-display_none by HubSpot France (@HubSpot-France) on CodePen.

Les valeurs de type display-legacy

Les valeurs de type display-legacy sont des mots-clés composés qui permettent de distinguer les comportements du contenant et du contenu de l'élément.

La propriété CSS display: inline-block, par exemple, crée une boîte en ligne :

See the Pen css-display_boite-en-ligne by HubSpot France (@HubSpot-France) on CodePen.

La propriété CSS display peut prendre d'autres valeurs de type display: legacy, telles qu'inline-table ou inline-grid.

Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez l’outil CMS de HubSpot.