Exemple
Affichage <p> éléments que les éléments en ligne:
p.inline
{
display: inline;
}
Essayez - le vous - même » Plus "Try it Yourself" exemples ci - dessous.
Définition et utilisation
La propriété d'affichage indique le type de boîte utilisé pour un élément HTML.
| Valeur par défaut: | inline |
|---|---|
| Hérité: | no |
| Animable: | no. Read about animatable |
| Version: | CSS1 |
| Syntaxe JavaScript: | object .style.display="none" Try it |
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
| Propriété | |||||
|---|---|---|---|---|---|
| display | 4.0 | 8.0 Partielle de 5,5 | 3.0 | 3.1 | 7.0 |
Note: Les valeurs "inline-table" , "table" , "table-caption" , "table-cell" , "table-column" , "table-column-group" , "table-row" , et "table-row-group" ne sont pas pris en charge dans IE7 et plus tôt. IE8 nécessite un DOCTYPE!. IE9 prend en charge les valeurs.
Remarque: Les valeurs "flex" et "inline-flex" nécessite un préfixe pour travailler dans Safari. Pour "flex" utiliser "display: -webkit-flex" , car "inline-flex" utiliser "display: -webkit-inline-flex;" .
Syntaxe CSS
display:value;propriété valeurs
| Valeur | La description | Joue-le |
|---|---|---|
| inline | Valeur par défaut. Affiche un élément comme un élément en ligne (like <span>) | Joue-le " |
| block | Affiche un élément comme un élément de bloc (like <p>) | Joue-le " |
| flex | Affiche un élément comme un conteneur flexible au niveau du bloc. Nouveau dans CSS3 | |
| inline-block | Affiche un élément comme un conteneur de bloc en-ligne. L'intérieur de ce bloc est formaté comme boîte de niveau bloc, et l'élément lui-même est formaté comme une boîte en-ligne | |
| inline-flex | Affiche un élément comme un conteneur flexible en-ligne. Nouveau dans CSS3 | |
| inline-table | L'élément est affiché comme une table de niveau en ligne | |
| list-item | Que l'élément se comporte comme un <li> élément | Joue-le " |
| run-in | Affiche un élément comme bloc ou en ligne, selon le contexte | |
| table | Que l'élément se comporte comme un <table> élément | |
| table-caption | Que l'élément se comporte comme un <caption> élément | |
| table-column-group | Que l'élément se comporte comme un <colgroup> élément | |
| table-header-group | Que l'élément se comporte comme un <thead> élément | |
| table-footer-group | Que l'élément se comporte comme un <tfoot> élément | |
| table-row-group | Que l'élément se comporte comme un <tbody> élément | |
| table-cell | Que l'élément se comporte comme un <td> élément | |
| table-column | Que l'élément se comporte comme un <col> élément | |
| table-row | Que l'élément se comporte comme un <tr> élément | |
| none | L'élément ne sera pas affiché du tout (has no effect on layout) la (has no effect on layout) en (has no effect on layout) | Joue-le " |
| initial | Définit cette propriété à sa valeur par défaut. Lisez à propos initial | Joue-le " |
| inherit | Hérite cette propriété de son élément parent. Lisez à propos de hériteront |
Autres exemples
Exemple
Une démonstration de l'utilisation de la valeur de la propriété inherit:
body {
display: inline;
}
p {
display: inherit;
} Essayez - le vous - même » Exemple
Régler le sens de certains éléments flexibles à l' intérieur d' un <div> élément dans l' ordre inverse:
div {
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
} Essayez - le vous - même » Pages associées
Tutoriel CSS: CSS affichage et de visibilité
Référence HTML DOM: display property