Display

3

Block vs inline

Chaque é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.

À gauche les éléments sont en display: block; tandis qu'à droite ils sont en display: inline;

Voir le CodePen de Simon Arnold (@smnarnold).

Block

Les éléments display: block; par défaut

  • Prennent toute la largeur
  • S'affichent sur une nouvelle ligne
  • Peuvent avoir une largeur/hauteur (width/height) de définies
  • Peuvent contenir d'autres éléments (block ou inline)

Raccourci Emmet: db

Inline

Les éléments display: inline; par défaut

  • Ne prennent strictement que l'espace nécessaire.
  • S'affichent un à la suite de l'autre.
  • N'acceptent pas d'avoir une largeur, une hauteur (width/height) ou des marges verticales (margin-top/margin-bottom).
  • Peuvent contenir d'autres éléments inline, mais pas block.

Raccourci Emmet: di

Inline-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 à la base que l'espace nécessaire.
  • S'affichent un à la suite de l'autre.
  • Peuvent avoir une largeur/hauteur (width/height) et des marges verticales (margin-top/margin-bottom) de définit.

Deux éléments inline-block peuvent s'afficher un à côté de l'autre. Cependant, dès qu'un espace ou un retour de ligne les séparent, un espace vide se créer entre les deux. Exactement comme le ferait un espace entre deux lettres.

Raccourci Emmet: dib

None

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 certain évènement. D'où l'utilité de la propriété display: none; qui indique au navigateur de faire abstraction d'un élément.

.fear {
  display: none;
}

Raccourci Emmet: dn

Pour en savoir plus, voir cet article MDN à propos de la propriété display.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme