Работа със свойството display в CSS

Вече знаете, че всички тагове принадлежат към определена блокова модель. При желание обаче може да смените модела със свойството display. Със стойност block на това свойство елементът може да се направи блоков, а със стойност inline - 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 да се държат като inline елементи:

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

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

Результат: