Работа со својството display во CSS

Веќе знаете дека сите тагови припаѓаат на одреден блок модел. По желба, сепак, може да се смени моделот со помош на својството display. Со вредноста block на ова својство елементот може да се направи блоковски, а со вредноста inline - инлајн.

Ајде да ги направиме таговите span да се однесуваат како блоковски елементи:

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

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

Результат:

А сега ајде да ги направиме таговите div да се однесуваат како инлајн:

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

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

Результат: