DisplayChaque élément possède une propriété display qui dicte son affichage.
Par exemple, les balises <div>, <p> ou <ul> prennent toute la largeur disponible et s'affichent l'une au-dessus de l'autre, car par défaut, leur propriété display est à block.
Tandis que les balises <span>, <img> ou <a> s'affichent l'une à la suite de l'autre, comme une suite de mots, car leur propriété display est à inline par défaut.
Les éléments display: block; en bref:
- Prennent toute la largeur disponible.
- S'affichent sur une nouvelle ligne.
(Logique puisqu'ils prennent toute la largeur) - Acceptent les propriétés width et height afin de définir la largeur et hauteur de l'élément.
- Peuvent contenir n'importe quel autre type d'éléments (block, inline, etc.).
Les éléments display: inline; en bref:
- Prennent la largeur de ce qu'ils contiennent, sans plus.
- S'affichent un à côté de l'autre, comme des mots dans une phrase, tant qu'il y a de l'espace et change de ligne au besoin.
- N'acceptent pas les propriétés width, height, margin-top et margin-bottom.
- Peuvent contenir d'autres éléments inline, mais pas block.
Les éléments en display: inline-block; sont en quelque sorte des hybrides entre inline et block.
Par exemple, les balises <button>, <select> ou <input> s'affichent l'une à la suite de l'autre, mais peuvent avoir une largeur et une hauteur (width/height) de définies, car leur propriété display est à inline-block par défaut.
- Ne prennent que la largeur de ce qu'ils contiennent par défaut, mais acceptent les propriétés width, height, margin-top et margin-bottom.
- S'affichent un à côté de l'autre.
(Logique puisqu'ils prennent uniquement la largeur de leur contenu)
Parfois il est préférable de ne pas afficher un élément.
Par exemple, un "popup" ne devrait pas être affiché tant qu'un utilisateur n'a pas déclenché un évènement. D'où l'utilité de la propriété display: none; indiquant au navigateur de faire abstraction d'un élément.