Display özelliği, elementlerin nasıl görüntüleneceğini belirleyen bir CSS özelliğidir. Bu özellik sayesinde elementler blok, inline veya inline-block olarak görüntülenebilirler.
Blok elementler tam genişlikte görüntülenirken, inline elementler sadece içeriklerinin genişliği kadar alan kaplarlar. Inline-block elementler ise hem içeriklerinin boyutlarına göre alan kaplarlar, hem de aynı satırda diğer inline elementlerle birlikte görüntülenebilirler.
Bir örnek vermek gerekirse, bir div etiketi varsayalım. Eğer bu div etiketinde display: block kullanırsak, o zaman bu div etiketi tam genişlikte görüntülenecektir. Ancak eğer display: inline kullanırsak, div etiketi sadece içerdiği içeriğin genişliği kadar genişliğe sahip olacaktır.
Aşağıdaki kod blokları, Display özelliği için bazı örnekler içermektedir:
<div class="block-example">
<h1>Bu bir blok elementtir</h1>
<p>Bu bir blok elementtir ve tüm genişlikte gösterilir.</p>
</div>
<span class="inline-example">Bu bir inline elementtir ve sadece içeriği kadar alan kaplar</span>
<div class="inline-block-example">
<h2>Bu bir inline-block elementtir</h2>
<p>Bu bir inline-block elementtir ve hem içeriği kadar alan kaplar, hem de diğer inline elementlerle aynı satırda olabilir.</p>
</div>
.block-example {
display: block;
background-color: lightblue;
color: white;
padding: 10px;
}
.inline-example {
display: inline;
background-color: lightgreen;
color: black;
padding: 10px;
}
.inline-block-example {
display: inline-block;
background-color: orange;
color: white;
padding: 10px;
}
Yukarıdaki kod bloklarında, div etiketi için her bir görüntüleme şekli için farklı bir CSS stil tanımlaması yapılmıştır. Blok elementi (block-example) tüm genişliğinde görüntülenirken, inline elementi (inline-example) içeriği kadar alan kaplayacak ve inline-block elementi (inline-block-example) hem içeriğine göre alan kaplayacak hem de diğer inline elementlerle aynı satırda görüntülenecektir.
