CSSда display хусусияти билан ишлаш

Сиз билдингизки, барча теглар маълум блок моделига тегишли. Истаган холда, аммо, display хусусияти ёрдамида моделни ўзгартириш мумкин. Ушбу хусусиятнинг block қиймати ёрдамида элементни блокли қилиш мумкин, inline қиймати ёрдамида эса - сатрли.

Келинг, span теглар блок элементлар каби туришини таъминлаймиз:

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

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

Результат:

Энди эса, div теглар сатр элементлар каби туришини таъминлаймиз:

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

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

Результат: