display-outside

Les mots-clés de type <display-outside> définissent le mode de disposition extérieure de l'élément. Autrement dit, ces mots-clés précisent le rôle de l'élément dans le flux. Ces valeurs peuvent être utilisées pour la propriété display. La syntaxe historique (avant CSS 3) prendra une seule valeur et la nouvelle syntaxe combinera cette valeur avec une valeur <display-inside>.

Syntaxe

Une valeur <display-outside> peut être l'un des mots-clés suivants.

Valeurs

block

L'élément génère une boîte de bloc ce qui ajoute des passages à la ligne avant et après l'élément dans le flux normal.

inline

L'élément génère une ou plusieurs boîtes en lignes qui n'ajoutent pas de passages à la ligne avant ou après. Dans un flux normal, le prochain élément sera sur la même ligne si l'espace le permet.

run-in

L'élément génère une boîte « run-in ». Si le voisin adjacent à l'élément est une boîte de bloc, la boîte run-in devient la première boîte en ligne qui suit cette boîte de bloc.

Les éléments run-in se comportent comme des éléments de bloc ou en ligne selon les éléments environnants. Autrement dit, si la boîte run-in contient une boîte de bloc, l'élément se comportera comme un bloc. Si la boîte de bloc suit une boîte run-in, la boîte run-in deviendra la première boîte en ligne de la boîte de bloc. Si une boîte en ligne succède à l'élément, la boîte run-in deviendra une boîte de bloc.

Note : Browsers that support the two value syntax, on finding the outer value only, such as when display: block or display: inline is specified, will set the inner value to flow. This will result in expected behavior; for example if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout.

[!NOTE] Les navigateurs qui prennent en charge la syntaxe avec deux valeurs utiliseront la valeur par défaut flow pour le mode intérieur si display: block ou display: inline. On a ainsi le résultat attendu (si on souhaite qu'un élément se comporte comme un bloc, on s'attend à ce que les éléments fils de cet élément contribuent à la disposition normale en bloc et en ligne).

Syntaxe formelle

<display-outside> = 
  block   |
  inline  |
  run-in

Exemples

Dans l'exemple suivant, les éléments <span>, normalement affichés comme des éléments en ligne, sont paramétrés avec display: block et passent à la ligne en étendant leur conteneur selon l'axe en ligne.

CSS

css
span {
  display: block;
  border: 1px solid rebeccapurple;
}

HTML

html
<span>span 1</span> <span>span 2</span>

Résultat

Compatibilité des navigateurs

css.properties.display.block

BCD tables only load in the browser

css.properties.display.inline

BCD tables only load in the browser

Voir aussi