Web sayfalarımızı oluşturan HTML etiketleri, sayfaya yerleşimlerine göre satır seviyesi elemanlar ve blok seviyesi olmak üzere 2 gruba ayrılırlar. Sayfa tasarımlarımızı yaparken bu iki özellik arasındaki farkı anlamak önemlidir.

Satır Seviyesi Elemanlar

Bu gruptaki HTML etiketleri, yeni bir satır başlatmazlar. Başka bir deyişle bu elemanlardan sonra gelen elemanlar, yeni bir satırda değil de bu elemanın yanında görüntülenirler. Örneğin linkler(a), resimler(img) ve metin biçimlendirme etiketlerinden bazıları (strong ve em gibi) bu gruba girerler. Bu elemanlar kendisini oluşturan içerik kadar bir alan kaplarlar. Örneğin “buraya tıklayın” şeklindeki bir yazıya link vermişsek bu elemanın sayfada işgal edeceği yer yazının kendisi kadardır.

Blok Seviyesi Elemanlar

Bu gruptaki HTML etiketleri ise eklendikleri zaman yeni bir satıra yerleşirler ve bulundukları yerin tamamı kadar genişliğe sahip olurlar. Örneğin paragraf(p), liste(ul, ol, li) ve div gibi elemanlar blok seviyesi elemanlara örnektir. Blok seviyesi elemanlar, satır seviyesi elemanların aksine %100 genişliğe sahip olurlar.

Satır ve Blok Seviyesi Olma Özelliğini Değiştirmek

HTML elemanlarının satır seviyesi mi yoksa blok seviyesi mi oldukları display adındaki CSS özelliği ile kontrol edilebilir. Satır seviyesi elemanların display özelliği varsayılan olarak inline, blok seviyesi elemanlarının display özelliği de varsayılan olarak block değerine sahiptir. Tabi bu özellikleri değiştirmek bizim elimizde. Aşağıdaki HTML koduna bakalım.

.
.
<div id="footer">
    <a href="#">Anasayfa</a>
    <a href="#">Hakkımızda</a>
    <a href="#">İletişim</a>
</div>
.
.

Normalde footer alanındaki bu 3 link yanyana görüntülenirler. Çünkü linkler satır seviyesi elemanlardır ve display özellikleri varsayılan olarak inline değerini alır. Bu linkleri alt alta görüntülemek istersek kullanabileceğimiz yöntemlerden birisi de display özelliği olabilir. Bunu sağlamak için aşağıdaki CSS kuralını CSS dosyamıza eklememiz gerekir:

#footer a {
    display:block;
}

Bu sayede ID’si footer olan divin içindeki linkler blok sevieysi olacak, dolayısıyla yeni satırdan başlayacak yani alt alta olacaklar. Bunun gibi değişik örnekler display özelliğini kullanarak sağlanabilir. Faydalı olması dileğiyle.