Display īpašības darbs CSS

Jūs jau zināt, ka visi tagi pieder noteiktai bloku modelim. Tomēr, ja vēlas, var mainīt modeli, izmantojot īpašību display. Izmantojot šīs īpašības vērtību block, elementu var padarīt par bloka elementu, bet izmantojot vērtību inline - par inline elementu.

Padarīsim, lai span tagi uzvestos kā bloka elementi:

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

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

Результат:

Un tagad padarīsim, lai div tagi uzvestos kā inline elementi:

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

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

Результат: