Darbas su display savybe CSS

Jūs jau žinote, kad visos žymos priklauso tam tikram blokiniam modeliui. Norint, tačiau, galima pakeisti modelį naudojant savybę display. Naudojant šios savybės reikšmę block elementą galima padaryti blokiniu, o naudojant reikšmę inline - eilutiniu.

Padarykime, kad span žymos elgtųsi kaip blokiniai elementai:

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

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

Результат:

O dabar padarykime, kad div žymos elgtųsi kaip eilutiniai:

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

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

Результат: