Propriété d'affichage CSS
Exemple
Utilisation de différentes valeurs d'affichage :
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display:
block;}
p.ex4 {display: inline-block;}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La displaypropriété spécifie le comportement d'affichage (le type de boîte de rendu) d'un élément.
En HTML, la valeur de la propriété d'affichage par défaut provient des spécifications HTML ou de la feuille de style par défaut du navigateur/de l'utilisateur. La valeur par défaut dans XML est inline, y compris les éléments SVG.
| Valeur par défaut: | ? |
|---|---|
| Hérité: | non |
| Animable : | non. En savoir plus sur l'animation |
| Version: | CSS1 |
| Syntaxe JavaScript : | objet .style.display="aucun" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
| Property | |||||
|---|---|---|---|---|---|
| display | 4.0 | 8.0 | 3.0 | 3.1 | 7.0 |
Remarque : Les valeurs "flex" et "inline-flex" nécessitent le préfixe -webkit- pour fonctionner dans Safari.
Remarque : "affichage : contenu" ne fonctionne pas dans la version antérieure 79 d'Edge.
Syntaxe CSS
display: value;
Valeurs de propriété
| Value | Description | Play it |
|---|---|---|
| inline | Displays an element as an inline element (like <span>). Any height and width properties will have no effect | |
| block | Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width | |
| contents | Makes the container disappear, making the child elements children of the element the next level up in the DOM | |
| flex | Displays an element as a block-level flex container | |
| grid | Displays an element as a block-level grid container | |
| inline-block | Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values | |
| inline-flex | Displays an element as an inline-level flex container | |
| inline-grid | Displays an element as an inline-level grid container | |
| inline-table | The element is displayed as an inline-level table | |
| list-item | Let the element behave like a <li> element | |
| run-in | Displays an element as either block or inline, depending on context | |
| table | Let the element behave like a <table> element | |
| table-caption | Let the element behave like a <caption> element | |
| table-column-group | Let the element behave like a <colgroup> element | |
| table-header-group | Let the element behave like a <thead> element | |
| table-footer-group | Let the element behave like a <tfoot> element | |
| table-row-group | Let the element behave like a <tbody> element | |
| table-cell | Let the element behave like a <td> element | |
| table-column | Let the element behave like a <col> element | |
| table-row | Let the element behave like a <tr> element | |
| none | The element is completely removed | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Plus d'exemples
Exemple
Une démonstration de l'utilisation de la valeur de la propriété contents. Dans l'exemple suivant, le conteneur .a disparaîtra et fera des éléments enfants (.b) les enfants de l'élément au niveau supérieur dans le DOM :
.a {
display: contents;
border:
2px solid red;
background-color: #ccc;
padding: 10px;
width: 200px;
}
.b {
border: 2px solid blue;
background-color: lightblue;
padding: 10px;
}
Exemple
Une démonstration de la façon d'utiliser la valeur de la propriété inherit :
body {
display: inline;
}
p {
display: inherit;
}
Exemple
Définissez la direction de certains éléments flexibles à l'intérieur d'un élément <div> dans l'ordre inverse :
div {
display: flex;
flex-direction: row-reverse;
}
Pages connexes
Tutoriel CSS : Affichage et visibilité CSS
Référence HTML DOM : propriété d'affichage