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.
Qu'est-ce que la propriété CSS display ?
La propriété CSS display est une propriété qui change le mode d'affichage par défaut d'un élément HTML. Elle peut par exemple transformer un élément de bloc en élément en ligne, convertir un titre en élément de liste ou encore organiser des paragraphes sous forme de tableau. Le code HTML ne change pas, seul le code CSS est modifié.
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.
Comment utiliser la propriété CSS display ?
Mis à jour :
Publié :
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.
Qu'est-ce que la propriété CSS display ?
La propriété CSS display est une propriété qui change le mode d'affichage par défaut d'un élément HTML. Elle peut par exemple transformer un élément de bloc en élément en ligne, convertir un titre en élément de liste ou encore organiser des paragraphes sous forme de tableau. Le code HTML ne change pas, seul le code CSS est modifié.
Gagnez du temps dans la gestion de votre code et de vos données
Téléchargez ce guide pour effectuer des vérifications et des changements en masse avec les regex et gagner en productivité.
Télécharger
Tous les champs sont obligatoires.
Merci d'avoir soumis le formulaire
Cliquez sur le lien pour accéder au contenu en tout temps
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 :
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 :
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.
Partager cet article sur les réseaux sociaux
Articles recommandés
Loader CSS : comment animer le chargement d'une page web ? 9 exemples
Langage CSS : le guide pour débutants
Comment centrer une image en CSS ?
CSS grid : le guide pour les maîtriser (+ exemples)
Comment mettre une image en background avec CSS ?
Comment créer et gérer les bordures en CSS ? (+ exemples)
24 exemples d'animations CSS pour vous inspirer
Media queries : comment les utiliser pour un site responsive ?
CSS Padding vs. Margin : différence, utilisation et exemples