Práca s vlastnosťou display v CSS

Už viete, že všetky značky patria do určitého blokového modelu. V prípade potreby však môžete model zmeniť pomocou vlastnosti display. Pomocou hodnoty block tejto vlastnosti môžete prvok urobiť blokovým a pomocou hodnoty inline - inline prvkom.

Urobme tak, aby sa značky span správali ako blokové prvky:

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

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

Результат:

A teraz urobme tak, aby sa značky div správali ako inline prvky:

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

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

Результат: