CSS-is display omadusega töötamine

Te juba teate, et kõik sildid kuuluvad kindlasse plokkmudelisse. Soovi korral saab siiski mudelit muuta kasutades omadust display. Selle omaduse väärtusega block saab elemendi muuta plokks, ning väärtusega inline - reas elemendiks.

Teeme nii, et span sildid käituksid nagu plokielemendid:

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

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

Результат:

Ja nüüd teeme nii, et div sildid käituksid nagu reaelemendid:

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

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

Результат: