Werken met de display eigenschap in CSS

Je weet al dat alle tags tot een bepaalde blokmodel behoren. Als je wilt, kun je echter het model wijzigen met behulp van de eigenschap display. Met de waarde block van deze eigenschap kun je een element een blokken element maken, en met de waarde inline - een inline element.

Laten we ervoor zorgen dat de tags span zich als blokken elementen gedragen:

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

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

Результат:

En laten we nu ervoor zorgen dat de tags div zich als inline elementen gedragen:

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

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

Результат: