<display-inside>

Le type de données CSS <display-inside> définit le type d'affichage (display) pour l'intérieur de l'élément. Ce type servira à la disposition du contenu de l'élément (si ce contenu n'est pas un élément remplacé). Ces mots-clés sont des valeurs de la propriété display et peuvent, historiquement être utilisé seul, ou plus récemment (cf. la spécification de niveau 3), être utilisé en combinaison avec un mot-clé <display-outside>.

Syntaxe

Valeurs valides pour <display-inside> :

flow

L'élément dispose son contenu en utilisant la mise en forme de flux (mise en forme bloc et en ligne).

Si son type d'affichage externe est inline et qu'il participe à un contexte de formatage bloc ou en ligne, il génère une boîte en ligne. Sinon, il génère une boîte conteneur de bloc.

Selon la valeur d'autres propriétés (comme position, float ou overflow) et selon qu'il participe lui-même à un contexte de formatage bloc ou en ligne, il établit soit un nouveau contexte de formatage de bloc pour son contenu, soit il intègre son contenu dans le contexte de formatage parent.

flow-root

L'élément génère une boîte de type bloc qui établit un nouveau contexte de formatage de bloc, définissant la racine du formatage.

table

Ces éléments se comportent comme les éléments HTML <table>. Ils définissent une boîte de niveau bloc.

flex

L'élément se comporte comme un élément de type bloc et dispose son contenu selon le modèle flexbox.

grid

L'élément se comporte comme un élément de type bloc et dispose son contenu selon le modèle de grille.

ruby

L'élément se comporte comme un élément en ligne et dispose son contenu selon le modèle de formatage ruby. Il se comporte comme les éléments HTML <ruby> correspondants.

Note : Les navigateurs qui prennent en charge la syntaxe à deux valeurs, lorsqu'ils ne trouvent que la valeur interne (par exemple avec display: flex ou display: grid), définissent automatiquement la valeur externe à block. Cela donne le comportement attendu : par exemple, si vous indiquez display: grid, la boîte créée sur le conteneur de grille sera une boîte de niveau bloc.

Syntaxe formelle

<display-inside> = 
  flow       |
  flow-root  |
  table      |
  flex       |
  grid       |
  ruby

Exemples

Dans l'exemple qui suit, la boîte parente est ciblée avec display: flow-root et crée donc un nouveau contexte de formatage de bloc qui contient l'élément flottant.

HTML

html

<div class="box">
  <div class="float">Je suis une boîte flottante&nbsp;!</div>
  <p>Je suis un contenu à l'intérieur du conteneur.</p>
</div>

CSS

css

.box {
  background-color: rgb(224 206 247);
  border: 5px solid rebeccapurple;
  display: flow-root;
}

.float {
  float: left;
  width: 200px;
  height: 150px;
  background-color: white;
  border: 1px solid black;
  padding: 10px;
}