Práce s vlastností display v CSS

Už víte, že všechny tagy patří k určitému blokovému modelu. Pokud si však přejete, můžete model změnit pomocí vlastnosti display. Pomocí hodnoty block této vlastnosti lze prvek učinit blokovým a pomocí hodnoty inline - řádkovým.

Udělejme, aby se tagy span chovaly jako blokové elementy:

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 nyní udělejme, aby se tagy div chovaly jako řádkové:

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

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

Результат: