display

  • Raccourci de la révision : CSS/display
  • Titre de la révision : display
  • ID de la révision : 288002
  • Créé :
  • Créateur : Mgjbot
  • Version actuelle ? Non
  • Commentaire robot Ajoute: [[zh-cn:CSS:display]] <<langbot>>

Contenu de la révision

{{ CSSRef() }}

Résumé

Cette propriété définit le type de rendu de boîte à utiliser pour un élément donné. Pour un langage comme HTML, où les éléments existants ont un comportement bien défini, les valeurs par défaut de la propriété display sont extraites des comportements décrits dans les spécifications HTML ou depuis la feuille de style par défaut du navigateur ou de l'utilisateur. Pour des langages où le comportement de l'affichage n'est pas défini (comme XML), la valeur par défaut est inline.

Outre les nombreux types d'affichage de boîte autorisés, il existe une autre valeur, none, qui permet de ne pas afficher un élément ni aucun de ses descendants. Le document est rendu comme si cet élément n'existait pas dans l'arbre du document. Cette valeur offre de puissantes possibilités, mais elle doit être utilisée avec précaution.

  • {{ Xref_cssinitial() }} : {{ Cssxref("inline") }}
  • S'applique à : tous les éléments
  • {{ Xref_cssinherited() }} : non
  • Pourcentages : N/A
  • Média : {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} : comme spécifiée, sauf pour l'élément racine, les éléments flottants, et les éléments positionnés en absolu.

Syntaxe

display:  <display-value> | {{ Cssxref("inherit") }}

Valeurs

<display-value> 
La valeur de display peut prendre l'une des valeurs suivantes :
inherit 
Définit explicitement la valeur de cette propriété comme étant celle de l'élément parent.
none 
Cette valeur désactive l'affichage d'un élément (il n'a donc aucun effet sur la mise en page), tous les descendants sont également cachés sans conditions. Le document est rendu comme si l'élément et ses descendants n'existaient pas dans l'arbre du document. Pour prendre en compte les dimensions d'un élément boîte dans le schéma de formatage du document, bien que son contenu soit invisible, voir la propriété {{ Cssxref("visibility") }}.
inline 
L'élément génère une ou plusieurs boîtes en-ligne.
block 
L'élément génère une boîte de type bloc.
inline-block 
Introduite dans CSS 2.1. L'élément génère une boîte de type bloc en flux, avec le contenu l'entourant comme une simple boîte en-ligne (se comporte comme le ferait un élément replacé). {{ Fx_minversion_inline(3) }}
list-item 
L'élément génère une boîte de type bloc pour le contenu et une boîte séparée en-ligne pour les éléments de liste .
compact 
Selon le contexte, cette valeur crée soit une boîte en-ligne, soit une boîte de type bloc. Selon les cas, différentes propriétés CSS peuvent s'appliquer à l'élément compact. Dans un contexte de type bloc, l'élément compact est rendu dans la marge droite ou gauche de l'élément bloc. L'élément compact participe au calcul de la hauteur de ligne pour la ligne courante, et la valeur de la propriété vertical-align est relative à l'élément bloc.
run-in 
Selon le contexte, cette valeur crée soit une boîte en-ligne, soit une boîte de type bloc. Selon les cas, différentes propriétés CSS peuvent s'appliquer à l'élément run-in. Les propriétés de l'élément run-in sont héritées de son élément parent dans l'arbre du document, elles ne le sont pas de l'élément bloc auquel il participe.
table-header-group | table-footer-group 
L'élément se comporte comme les éléments correspondants de tableau HTML thead et tfoot, desquels ces valeurs tiennent leur nom.
table 
L'élément se comporte comme la balise correspondante de tableau HTML, de laquelle cette valeur tient son nom.
inline-table 
L'élément se comporte comme la balise correspondante de tableau HTML, de laquelle cette valeur tient son nom. La valeur inline-table n'a pas de correspondance directe en HTML. {{ Fx_minversion_inline(3) }}
table-caption 
L'élément se comporte comme la balise correspondante de tableau HTML, de laquelle cette valeur tient son nom.
table-cell 
L'élément se comporte comme la balise correspondante de tableau HTML, de laquelle cette valeur tient son nom.
table-row | table-row-group 
L'élément se comporte comme la balise correspondante de tableau HTML, de laquelle cette valeur tient son nom.
table-column | table-column-group 
L'élément se comporte comme les éléments correspondants de tableau HTML, desquels ces valeurs tiennent leur nom.

Exemples

{{ CSSRefExampleLink("display") }}

p  { display: block }

Notes

  • Conformité CSS1 : les navigateurs doivent tout à fait ignorer la propriété display et utiliser à la place les paramètres par défaut du navigateur pour chaque élément.
  • Dans CSS1, la valeur par défaut pour cette propriété était block. Dans CSS2 elle a été changée pour inline.
Éléments « bloc » et éléments « en-ligne »
  • Les éléments de type bloc créent des blocs de contenu verticalement distincts (dans le contexte visuel), généralement en utilisant des retours à la ligne avant et après le contenu. Seule cette valeur de display permet de générer des éléments positionnés. Le comportement de type bloc est illustré par des éléments HTML tels que blockquote, div ou encore les titres hx. Les valeurs de la propriété display créant un élément de type bloc sont : block, list-item, table, compact et run-in.
  • Les éléments de type en-ligne ne créent pas de blocs distincts de contenu et le contenu de l'élément est rendu à l'aide d'une boîte ligne (le contenu est distribué ligne par ligne dans l'élément bloc, physique ou virtuel, le contenant). Le comportement de type en-ligne est illustré par des éléments HTML tels que le formatage physique et virtuel des caractères, les images non flottantes et les contenus non balisés. Les valeurs de la propriété display créant un élément de type en-ligne sont : inline, inline-table, compact et run-in.

Spécifications

Compatibilité des navigateurs

Navigateur Version minimale
Internet Explorer 4
Netscape 4
Opera 3.5

Les valeurs table-* sont supportées dans Firefox et ???.

Les valeurs compact et run-in ne sont pas supportées dans Firefox. Elles sont supportées dans ???.

Les valeurs inline-block et inline-table sont supportées dans Firefox 3 / Gecko 1.9. La valeur inline-block est aussi supportée dans ??? et la valeur inline-table est aussi supportée dans ???.

Voir également

{{ Cssxref("visibility") }}, {{ Cssxref("position") }}, {{ Cssxref("float") }}

Interwiki Languages Links



{{ languages( { "en": "en/CSS/display", "es": "es/CSS/display", "pl": "pl/CSS/display", "pt": "pt/CSS/display", "zh-cn": "cn/CSS/display" } ) }}

Source de la révision

<p> {{ CSSRef() }}
</p>
<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9"> Résumé </h3>
<p>Cette propriété définit le type de rendu de boîte à utiliser pour un élément donné. Pour un langage comme HTML, où les éléments existants ont un comportement bien défini, les valeurs par défaut de la propriété <code>display</code> sont extraites des comportements décrits dans les spécifications HTML ou depuis la feuille de style par défaut du navigateur ou de l'utilisateur. Pour des langages où le comportement de l'affichage n'est pas défini (comme XML), la valeur par défaut est <code>inline</code>.
</p><p>Outre les nombreux types d'affichage de boîte autorisés, il existe une autre valeur, <code>none</code>, qui permet de ne pas afficher un élément ni aucun de ses descendants. Le document est rendu comme si cet élément n'existait pas dans l'arbre du document. Cette valeur offre de puissantes possibilités, mais elle doit être utilisée avec précaution.
</p>
<ul><li> {{ Xref_cssinitial() }} : {{ Cssxref("inline") }}
</li><li> S'applique à : tous les éléments
</li><li> {{ Xref_cssinherited() }} : non
</li><li> Pourcentages : N/A
</li><li> Média : {{ Xref_cssvisual() }}
</li><li> {{ Xref_csscomputed() }} : comme spécifiée, sauf pour l'élément racine, les éléments <a href="fr/CSS/float">flottants</a>, et les éléments <a href="fr/CSS/position">positionnés en absolu</a>.
</li></ul>
<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
<pre class="eval"><code>display:</code>  &lt;display-value&gt; | {{ Cssxref("inherit") }}
</pre>
<h3 id="Valeurs" name="Valeurs"> Valeurs </h3>
<dl><dt> &lt;display-value&gt; </dt><dd> La valeur de <code>display</code> peut prendre l'une des valeurs suivantes :
<dl><dd><dl><dt> inherit </dt><dd> Définit explicitement la valeur de cette propriété comme étant celle de l'élément parent.
</dd><dt> none </dt><dd> Cette valeur désactive l'affichage d'un élément (il n'a donc aucun effet sur la mise en page), tous les descendants sont également cachés sans conditions. Le document est rendu comme si l'élément et ses descendants n'existaient pas dans l'arbre du document. Pour prendre en compte les dimensions d'un élément boîte dans le schéma de formatage du document, bien que son contenu soit invisible, voir la propriété {{ Cssxref("visibility") }}.
</dd><dt> inline </dt><dd> L'élément génère une ou plusieurs boîtes en-ligne.
</dd><dt> block </dt><dd> L'élément génère une boîte de type bloc.
</dd><dt> inline-block </dt><dd> Introduite dans CSS 2.1. L'élément génère une boîte de type bloc <i>en flux</i>, avec le contenu l'entourant comme une simple boîte en-ligne (se comporte comme le ferait un élément replacé). {{ Fx_minversion_inline(3) }}
</dd><dt> list-item </dt><dd> L'élément génère une boîte de type bloc pour le contenu et une boîte séparée en-ligne pour les éléments de liste .
</dd><dt> compact </dt><dd> Selon le contexte, cette valeur crée soit une boîte en-ligne, soit une boîte de type bloc. Selon les cas, différentes propriétés CSS peuvent s'appliquer à l'élément <code>compact</code>. Dans un contexte de type bloc, l'élément <code>compact</code> est rendu dans la marge droite ou gauche de l'élément bloc. L'élément <code>compact</code> participe au calcul de la hauteur de ligne pour la ligne courante, et la valeur de la propriété <code>vertical-align</code> est relative à l'élément bloc.
</dd><dt> run-in </dt><dd> Selon le contexte, cette valeur crée soit une boîte en-ligne, soit une boîte de type bloc. Selon les cas, différentes propriétés CSS peuvent s'appliquer à l'élément <code>run-in</code>. Les propriétés de l'élément <code>run-in</code> sont héritées de son élément parent dans l'arbre du document, elles ne le sont pas de l'élément bloc auquel il participe.
</dd><dt> table-header-group | table-footer-group </dt><dd> L'élément se comporte comme les éléments correspondants de tableau HTML <code>thead</code> et <code>tfoot</code>, desquels ces valeurs tiennent leur nom.
</dd><dt> table </dt><dd> L'élément se comporte comme la balise correspondante de tableau HTML, de laquelle cette valeur tient son nom.
</dd><dt> inline-table </dt><dd> L'élément se comporte comme la balise correspondante de tableau HTML, de laquelle cette valeur tient son nom. La valeur <code>inline-table</code> n'a pas de correspondance directe en HTML. {{ Fx_minversion_inline(3) }}
</dd><dt> table-caption </dt><dd> L'élément se comporte comme la balise correspondante de tableau HTML, de laquelle cette valeur tient son nom.
</dd><dt> table-cell </dt><dd> L'élément se comporte comme la balise correspondante de tableau HTML, de laquelle cette valeur tient son nom.
</dd><dt> table-row | table-row-group </dt><dd> L'élément se comporte comme la balise correspondante de tableau HTML, de laquelle cette valeur tient son nom.
</dd><dt> table-column | table-column-group </dt><dd> L'élément se comporte comme les éléments correspondants de tableau HTML, desquels ces valeurs tiennent leur nom.
</dd></dl>
</dd></dl>
</dd></dl>
<h3 id="Exemples" name="Exemples"> Exemples </h3>
<p>{{ CSSRefExampleLink("display") }}
</p>
<pre class="eval">p  { display: block }
</pre>
<h3 id="Notes" name="Notes"> Notes </h3>
<ul><li> Conformité CSS1 : les navigateurs doivent tout à fait ignorer la propriété <code>display</code> et utiliser à la place les paramètres par défaut du navigateur pour chaque élément.
</li><li> Dans CSS1, la valeur par défaut pour cette propriété était <code>block</code>. Dans CSS2 elle a été changée pour <code>inline</code>.
</li></ul>
<h5 id=".C3.89l.C3.A9ments_.C2.AB_bloc_.C2.BB_et_.C3.A9l.C3.A9ments_.C2.AB_en-ligne_.C2.BB" name=".C3.89l.C3.A9ments_.C2.AB_bloc_.C2.BB_et_.C3.A9l.C3.A9ments_.C2.AB_en-ligne_.C2.BB"> Éléments « bloc » et éléments « en-ligne » </h5>
<ul><li> Les <b>éléments de type bloc</b> créent des blocs de contenu verticalement distincts (dans le contexte visuel), généralement en utilisant des retours à la ligne avant et après le contenu. Seule cette valeur de <code>display</code> permet de générer des éléments positionnés. Le comportement de type bloc est illustré par des éléments HTML tels que <code>blockquote</code>, <code>div</code> ou encore les titres <code><strong>h</strong><sub>x</sub></code>. Les valeurs de la propriété <code>display</code> créant un élément de type bloc sont : <code>block</code>, <code>list-item</code>, <code>table</code>, <code>compact</code> et <code>run-in</code>.
</li><li> Les <b>éléments de type en-ligne</b> ne créent pas de blocs distincts de contenu et le contenu de l'élément est rendu à l'aide d'une boîte ligne (le contenu est distribué ligne par ligne dans l'élément bloc, physique ou virtuel, le contenant). Le comportement de type en-ligne est illustré par des éléments HTML tels que le formatage physique et virtuel des caractères, les images non flottantes et les contenus non balisés. Les valeurs de la propriété <code>display</code> créant un élément de type en-ligne sont : <code>inline</code>, <code>inline-table</code>, <code>compact</code> et <code>run-in</code>.
</li></ul>
<h3 id="Sp.C3.A9cifications" name="Sp.C3.A9cifications"> Spécifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS1#display">CSS 1</a>
</li><li> <a class="external" href="http://www.yoyodesign.org/doc/w3c/css2/visuren.html#propdef-display">CSS 2 (fr)</a>
</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display">CSS 2.1 (en)</a>
</li></ul>
<h3 id="Compatibilit.C3.A9_des_navigateurs" name="Compatibilit.C3.A9_des_navigateurs"> Compatibilité des navigateurs </h3>
<table class="standard-table"> <tbody><tr> <th>Navigateur</th> <th>Version minimale</th> </tr> <tr> <td>Internet Explorer</td> <td>4</td> </tr> <tr> <td>Netscape</td> <td>4</td> </tr> <tr> <td>Opera</td> <td>3.5</td> </tr>
</tbody></table>
<p>Les valeurs <code>table-*</code> sont supportées dans Firefox et ???.
</p><p>Les valeurs <code>compact</code> et <code>run-in</code> ne sont pas supportées dans Firefox. Elles sont supportées dans ???.
</p><p>Les valeurs <code>inline-block</code> et <code>inline-table</code> sont supportées dans Firefox 3 / Gecko 1.9. La valeur <code>inline-block</code> est aussi supportée dans ??? et la valeur <code>inline-table</code> est aussi supportée dans ???.
</p>
<h3 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement"> Voir également </h3>
<p>{{ Cssxref("visibility") }}, {{ Cssxref("position") }}, {{ Cssxref("float") }}
</p><p><span class="comment">Interwiki Languages Links</span>
</p><p><br>
</p><p><br>
</p>
<div class="noinclude">
</div>
{{ languages( { "en": "en/CSS/display", "es": "es/CSS/display", "pl": "pl/CSS/display", "pt": "pt/CSS/display", "zh-cn": "cn/CSS/display" } ) }}
Revenir à cette révision