CSS'te display Özelliği ile Çalışma

Tüm etiketlerin belirli bir blok modeline ait olduğunu zaten biliyorsunuz. Ancak, isterseniz, display özelliği kullanılarak model değiştirilebilir. Bu özelliğin block değeri kullanılarak bir öğe blok seviyesi, inline değeri kullanılarak da satır içi (inline) yapılabilir.

Hadi, span etiketlerinin blok öğeler gibi davranmasını sağlayalım:

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

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

Результат:

Şimdi de div etiketlerinin satır içi gibi davranmasını sağlayalım:

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

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

Результат: