CSS-də display xüsusiyyəti ilə iş

Artıq bilirsiniz ki, bütün teqlər müəyyən bir blok modelinə aiddir. Lakin istəsəniz, display xüsusiyyəti vasitəsilə modeli dəyişə bilərsiniz. Bu xüsusiyyətin block dəyəri ilə elementi blok elementinə çevirə bilərsiniz, inline dəyəri ilə isə - sətir elementi.

Gəlin span teqlərinin blok elementləri kimi davranmasını təmin edək:

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

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

Результат:

İndi isə div teqlərinin sətir elementləri kimi davranmasını təmin edək:

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

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

Результат: