Attribut display CSS

Définition et utilisation

L'attribut display spécifie le type de boîte à générer pour l'élément.

Description

Cette propriété est utilisée pour définir le type de boîte de display générée par l'élément lors de la création de la mise en page. Pour les types de documents tels que HTML, l'utilisation imprudente de display peut être dangereuse car elle pourrait violer la hiérarchie de display déjà définie dans HTML. Pour XML, comme XML n'a pas de cette hiérarchie intégrée, display est absolument nécessaire.

Remarque :Dans CSS2, il existait les valeurs compact et marker, mais en raison du manque de support général, elles ont été supprimées de CSS2.1.

Voir également :

Tutoriel CSS :Positionnement CSS

Manuel HTML DOM :Attribut display

Exemple

Faire apparaître un cadre en ligne pour le paragraphe :

p.inline
  {
  display:inline;
  }

Essayer vous-même

Syntaxe CSS

display: value;

Valeur de l'attribut

Valeur Description
none Cet élément n'est pas affiché.
block Cet élément s'affiche comme un élément en bloc, avec un saut de ligne avant et après.
inline Par défaut. Cet élément s'affiche comme un élément en ligne, sans saut de ligne avant et après.
inline-block Élément en ligne en bloc (valeur ajoutée à CSS2.1).
list-item Cet élément s'affiche comme une liste.
run-in Cet élément s'affiche en tant qu'élément en bloc ou en ligne selon le contexte.
compact La valeur compact existe dans CSS, mais elle a été supprimée de CSS2.1 en raison du manque de support général.
marker Il existe une valeur marker dans CSS, mais en raison du manque de prise en charge généralisée, elle a été supprimée de CSS2.1.
table Cet élément s'affiche comme une table en bloc (comme <table>), avec un saut de ligne avant et après la table.
inline-table Cet élément s'affiche comme une table en ligne (comme <table>), sans saut de ligne avant et après la table.
table-row-group Cet élément s'affiche comme un ou plusieurs groupes de lignes (comme <tbody>)
table-header-group Cet élément s'affiche comme un ou plusieurs groupes de lignes (comme <thead>)
table-footer-group Cet élément s'affiche comme un ou plusieurs groupes de lignes (comme <tfoot>)
table-row Cet élément s'affiche comme une ligne de table (comme <tr>)
table-column-group Cet élément s'affiche comme un ou plusieurs groupes de colonnes (comme <colgroup>)
table-column Cet élément s'affiche comme une colonne de cellule (comme <col>)
table-cell Cet élément s'affiche comme une cellule de table (comme <td> et <th>)
table-caption Cet élément s'affiche comme une légende de table (comme <caption>)
inherit L'attribut display devrait être hérité de la valeur de l'attribut display de l'élément parent.

Détails techniques

Valeur par défaut : inline
Héritabilité : non
Version : CSS1
Syntaxe JavaScript : object.style.display="inline"

Exemple TIY

Comment afficher un élément en tant qu'élément en ligne
Cet exemple montre comment afficher un élément en tant qu'élément en ligne.
Comment afficher un élément en tant qu'élément en bloc
Cet exemple montre comment afficher un élément en tant qu'élément en bloc.

Prise en charge du navigateur

Les numéros dans le tableau indiquent la version du navigateur la première à prendre en charge cette propriété.

Chrome IE / Edge Firefox Safari Opera
4.0 8.0 3.0 3.1 7.0

Remarque :Si !DOCTYPE est spécifié, Internet Explorer 8 (et versions supérieures) prennent en charge les valeurs des attributs "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group" et "inherit".