La propriété display est la propriété la plus importante de CSS utilisée pour contrôler la présentation de l’élément. Il spécifie comment l’élément est affiché.
Chaque élément a une valeur d’affichage par défaut en fonction de sa nature. Chaque élément de la page Web est une boîte rectangulaire et la propriété CSS définit le comportement de cette boîte rectangulaire.
Syntaxe :
display:value;
Les valeurs de display
Les valeurs de display CSS suivantes sont couramment utilisées.
- display: inline;
- display: inline-block;
- display: block;
- display: none;
1) CSS display inline
L’élément en ligne prend uniquement la largeur requise. Cela ne force pas le saut de ligne pour que le flux de texte ne soit pas interrompu dans l’exemple en ligne.
Les éléments en ligne sont:
- <span>
- <a>
- <em>
- <b> etc.
Voyons un exemple de display en ligne.
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: inline;
}
</style>
</head>
<body>
<p>Hello w3tutoriels.com</p>
<p>Java.</p>
<p>SQL.</p>
<p>HTML.</p>
<p>CSS.</p>
</body>
</html>
Résultat :
2) CSS display inline-block
L’élément inline-block de display est très similaire à l’élément inline, à la différence que vous pouvez définir la largeur et la hauteur.
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: inline-block;
}
</style>
</head>
<body>
<p>Hello w3tutoriels.com</p>
<p>Java.</p>
<p>SQL.</p>
<p>HTML.</p>
<p>CSS.</p>
</body>
</html>
Résultat :
3) CSS display block
L’élément display block de display CSS utilise autant d’espace horizontal que possible. Signifie que l’élément de bloc prend toute la largeur disponible. Ils font un saut de ligne avant et après eux.
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: block;
}
</style>
</head>
<body>
<p>Hello w3tutoriels.com</p>
<p>Java.</p>
<p>SQL.</p>
<p>HTML.</p>
<p>CSS.</p>
</body>
</html>
Résultat :
4) CSS display none
La valeur « none » supprime totalement l’élément de la page. Cela ne prendra pas de place.
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
display: none;
}
</style>
</head>
<body>
<h1>This heading is visible.</h1>
<h1 class="hidden">Ce n'est pas visible.</h1>
<p>Vous pouvez voir que l'en-tête masqué ne contient aucun espace.</p>
</body>
</html>
Résultat :
Autres valeurs de display CSS
| Valeur de la propriété | La description |
|---|---|
| flx | Il est utilisé pour afficher un élément en tant que conteneur flex au niveau du bloc. C’est nouveau en CSS3. |
| inline-flex | Il est utilisé pour afficher un élément en tant que conteneur flex au niveau en ligne. C’est nouveau en CSS3. |
| inline-table | Il affiche un élément sous forme de tableau au niveau en ligne. |
| list-item | Cela fait que l’élément se comporte comme un élément <li>. |
| table | Cela fait que l’élément se comporte comme un élément <table>. |
| table-caption | Cela fait que l’élément se comporte comme un élément <caption>. |
| table-colomne-group | Cela fait que l’élément se comporte comme un élément <colgroup>. |
| table-header-group | Cela fait que l’élément se comporte comme un élément <thead>. |
| table-footer-group | Cela fait que l’élément se comporte comme un élément <tfoot>. |
| table-row-group | Cela fait que l’élément se comporte comme un élément <tbody>. |
| table-cell | Cela fait que l’élément se comporte comme un élément <td>. |
| table-row | Cela fait que l’élément se comporte comme un élément <tr>. |
| table-column | Cela fait que l’élément se comporte comme un élément <col>. |