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).

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

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

 

HTML

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

Résultat

Compatibilité des navigateurs

Prise en charge run-in

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simple
Expérimentale
Chrome Aucun support 1 — 32
Notes
Aucun support 1 — 32
Notes
Notes Before Chrome 4, run-in was not supported before inline elements.
Edge Aucun support NonFirefox Aucun support NonIE Support complet 8Opera Aucun support 7 — 15Safari Aucun support 1 — 8
Notes
Aucun support 1 — 8
Notes
Notes Before Safari 5, run-in was not supported before inline elements.
WebView Android Aucun support ? — 4.4.3
Notes
Aucun support ? — 4.4.3
Notes
Notes Before version 4, run-in was not supported before inline elements.
Chrome Android Aucun support ? — 32
Notes
Aucun support ? — 32
Notes
Notes Before Chrome 4, run-in was not supported before inline elements.
Edge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android ? Safari iOS Aucun support ? — 8
Notes
Aucun support ? — 8
Notes
Notes Before Safari 5, run-in was not supported before inline elements.
Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,