Travailler avec la propriété display en CSS

Vous savez déjà que toutes les balises appartiennent à un certain modèle de boîte. Si on le souhaite, cependant, on peut changer ce modèle à l'aide de la propriété display. Avec la valeur block de cette propriété, on peut rendre un élément de type bloc, et avec la valeur inline - de type en ligne.

Faisons en sorte que les balises span se comportent comme des éléments de bloc :

html<span>text</span>
<span>text</span>
<span>text</span>

cssspan {
  display: block;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-bottom: 20px;
}

Результат:

Et maintenant, faisons en sorte que les balises div se comportent comme des éléments en ligne :

html<div>text</div>
<div>text</div>
<div>text</div>

cssdiv {
  display: inline;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат: