La propriété display en CSS3 possède de nouvelles valeurs. C’est l’un des outils les plus puissants pour contrôler le rendu et la disposition des éléments HTML sur une page web. Comprendre les différentes valeurs de cette propriété est essentiel pour créer des mises en page efficaces et esthétiques. Découvrez la liste en détail de chaque valeur de la propriété display avec des exemples concrets pour illustrer leur utilisation.
La propriété display
- display: block;
- display: list-item;
- display: none;
contenu dans une div
Qu’est ce qu’un élément block et un élément inline
En HTML et CSS, les éléments block et inline sont des types de boîtes dans lesquelles vous placez votre contenu.
Un élément block occupe toute la largeur disponible et commence sur une nouvelle ligne. Cela signifie que si vous placez deux éléments block l’un après l’autre, ils seront l’un en dessous de l’autre. Les éléments block sont souvent utilisés pour structurer les grandes parties de votre page, comme les paragraphes <p>, les titres <h1> à <h6>, les div <div>, etc…
Un élément inline, en revanche, ne commence pas sur une nouvelle ligne et ne prend que la largeur nécessaire pour contenir son contenu. Cela signifie que vous pouvez placer plusieurs éléments inline les uns à côté des autres sur la même ligne. Les éléments inline sont couramment utilisés pour des éléments tels que du texte, des liens <a>, des images <img> à l’intérieur d’un paragraphe, etc…
Pensez à un élément block comme à un gros bloc solide qui prend toute la largeur, tandis qu’un élément inline est plus comme une bande étroite qui s’insère dans le texte ou entre les éléments block.
En CSS, vous pouvez modifier le comportement des éléments block et inline en utilisant les propriétés telles que display, ce qui vous permet de transformer un élément block en élément inline et vice versa. Cela peut être utile pour personnaliser la mise en page de votre page web.
Liste des valeurs de la propriété display
| Valeur | Description |
|---|---|
| block | Rend l’élément comme un bloc de niveau, commençant sur une nouvelle ligne et prenant tout l’espace horizontal disponible. |
| inline | Rend l’élément comme un élément en ligne, s’alignant avec le reste du contenu et ne commençant pas sur une nouvelle ligne. |
| inline-block | Rend l’élément comme un élément en ligne-bloc, combinant les comportements des valeurs inline et block. |
| none | Masque complètement l’élément, le rendant invisible sur la page mais continuant à occuper de l’espace dans le flux du document. |
| flex | Définit un conteneur flexible pour les éléments enfants, permettant un positionnement flexible et des redimensionnements adaptatifs. |
| inline-flex | Rend le conteneur comme un élément en ligne flexible. |
| grid | Définit un conteneur de grille pour les éléments enfants, permettant un positionnement bidimensionnel des éléments. |
| inline-grid | Rend le conteneur comme un élément en ligne de grille. |
| table | Rend l’élément comme un élément de tableau <table>, transformant son comportement pour se comporter comme un tableau. |
| table-row | Rend l’élément comme une ligne de tableau <tr>. |
| table-cell | Rend l’élément comme une cellule de tableau <td> ou <th>. |
| list-item | Rend l’élément comme un élément de liste <li>, ajoutant un marqueur devant son contenu. |
| run-in | Indique que l’élément peut être rendu comme un élément en ligne (inline) ou un bloc (block), selon le contexte. |
Exemples concrets de l’utilisation de la propriété display
La valeur block
La valeur block rend un élément HTML en tant que bloc de niveau. Cela signifie que l’élément occupe tout l’espace horizontal disponible et commence sur une nouvelle ligne. Les éléments de type block peuvent avoir une largeur et une hauteur spécifiées et peuvent contenir d’autres éléments à l’intérieur d’eux.
<div>
Ceci est un exemple d'élément de type bloc.
</div>div {
display: block;
width: 200px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 10px;
}La valeur inline
La valeur inline rend un élément HTML en ligne avec le reste du contenu. Les éléments de type inline ne commencent pas sur une nouvelle ligne et leur largeur est généralement déterminée par leur contenu. Ils ne peuvent pas avoir de largeur ou de hauteur spécifiées.
<p>Ceci est un <span>exemple d'élément en ligne</span> dans un paragraphe.</p>span {
display: inline;
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 5px;
}La valeur None
La valeur none masque complètement un élément HTML. Cela signifie que l’élément ne sera pas affiché sur la page, comme s’il n’existait pas dans le code HTML. Cependant, l’élément continuera à occuper de l’espace dans le flux du document.
<p>Cet élément est <span class="hidden">caché</span>.</p>.hidden {
display: none;
}La liste de toutes les valeurs de la propriété display
/* Valeurs de type */
display: block;
display: inline;
display: run-in;
/* Valeurs de type */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;
/* Combinaison de valeurs */
/* et */
display: block flow;
display: inline table;
display: flex run-in;
/* Valeurs de type */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;
/* Valeurs de type */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;
/* Valeurs de type */
display: contents;
display: none;
/* Valeurs de type */
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;
/* Valeurs globales */
display: inherit;
display: initial;
display: unset; La propriété display en CSS offre une variété de valeurs pour contrôler la disposition des éléments HTML sur une page web. En comprenant comment chaque valeur fonctionne et en utilisant des exemples concrets, vous pouvez créer des mises en page plus dynamiques et réactives. Expérimentez avec ces valeurs dans vos projets CSS pour découvrir leur potentiel complet.
