CSS-da display xususiyati bilan ishlash

Siz allaqachon bilasizki, barcha teglar ma'lum bir blok modeliga tegishli. Istasangiz, biroq, display xususiyati yordamida modelni o'zgartirishingiz mumkin. Ushbu xususiyatning block qiymati yordamida elementni blokli qilish mumkin, inline qiymati yordamida esa - satrli.

Keling, span teglari blok elementlar kabi tutayotganini qilaylik:

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

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

Результат:

Endi esa, div teglari satrli elementlar kabi tutayotganini qilaylik:

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

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

Результат: