Praca z właściwością display w CSS

Wiesz już, że wszystkie znaczniki należą do określonego modelu blokowego. W razie potrzeby można jednak zmienić model za pomocą właściwości display. Za pomocą wartości block tej właściwości można uczynić element blokowym, a za pomocą wartości inline - liniowym.

Sprawmy, aby znaczniki span zachowywały się jak elementy blokowe:

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 sprawmy, aby znaczniki div zachowywały się jak liniowe:

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

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

Результат: