La propriété display
Le css par défaut des navigateurs attribuent un type spécifique à chaque élément en fonction de sa fonction. Par exemple:
- block: div, p, bloquote, aside, section, footer,...
- inline: a, strong, em, b, i, mark,...
- table: table
- inline-block: img
- list-item: li
On peut modifier la propriété display en fonction de nos besoins.
Les 2 fonctionnalités majeures que l'évolution des navigateurs ont enfin permis d'utiliser sont:
display:table, table-cell,..
Ce type permet de simuler le même comportement qu'un tableau. Cela permet de résoudre des problème d'alignement vertical ou de colonne de même hauteurs difficilement réalisables juste là.
le display:inline-block
Bien qu'il existe depuis longtemps, il n'est utilisé depuis qu'assez récemment. Son support sur les anciens navigateurs n'étaient pas complet. Il permet de s'affranchir des flottants dans certains cas, permet la gestion de l'alignement vertical. Par contre, il faut gérer le problème de l'espacement dans le html.
le display:flex
Plus moderne, ce mode d'affichage permet de gérer des affichages complexes de manière relativement simple. Voir ce guide
le display:grid
Ce display permet de voir une zone comme une grille et d'assigner des éléments quelconque à des cellules de cette grille. Ce système est très pratique pour réorganiser la disposition des éléments lors de variation de taille d'écran (mode responsive) Voir le guide
Editer