2 façons de considérer un élément :
-
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.
Display
Display : inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
-
Display : block: génère une boite BLOC -
Display : inline: génère une ou plusieurs boites en ligne. -
Display : inline-block: l'élément est formaté en-ligne alors que son contenu est formaté en bloc. -
Display : list-item: 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 . -
Display : none: l'élément n'est pas affiché. -
Display : table...: comportement de tableau -
Display : flex...: comportement de boîte flexible
Affichage Classique
Display Block
li { display : block }
- Ligne 1
- Ligne 2
- Ligne 3
Display Inline
li { display : inline }
- Ligne 1
- Ligne 2
- Ligne 3
Display Block
div { border: thin solid ; width: 40%}
Display Inline-Block
div { border: thin solid ; display: inline-block ; width: 25% ; vertical-align: top ;}
Contrairement à table-cell, les cellules ne s'adaptent pas à la cellule la plus haute !
Affichage Tabulaire
Les vrais tableaux sont affichés via la balise TABLE du HTML. Seule l'utilisation de TABLE pour de la mise en forme de blocs est discutable et donc des possibilités alternatives existent en CSS : Inline-Block, Table-Cell, Flex.
Display table-cell
div { border: thin solid ; display: table-cell }
Display table-cell
.tablo { display: table ; border-spacing: 10px ; border: medium groove ; width: 70% ; }
.cellule { display: table-cell ; border: thin solid ; }
.cellule:first-child {width: 30%}
.cellule:last-child {width: 20%}
Contrairement à inline-block, les cellules s'adaptent à la cellule la plus haute !