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:

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

span {
	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:

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

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

HTML kodunuzda birkaç paragrafınız olduğunu varsayalım. Bunların satır içi öğeler gibi davranmasını sağlayın.

HTML kodunuzda birkaç bağlantınız olduğunu varsayalım. Bunların blok öğeler gibi davranmasını sağlayın. Onlara kenarlık, genişlik ve yükseklik atayın.