HTML Block ve İnline Elementler

1 1.889

CSS özellikleri arasında en zor anlaşılan konulardan olan display özelliğinin parametreleri, HTML elementlerin varsayılan değerleri block ve inline hakkında konuşacağız.

Ayrıca bu iki özelliği anladığınız da, bunlarla alakalı bir değer olan inline-block hakkında da bilgi vereceğim.

Bu yazının amacı CSS display özelliğini anlatmak değil.Onu zaten CSS dersleri içerisinde anlattım.

Bu yazının esas amacı bir çok kişinin kafası karıştıran HTML elementleri varsayılan display değerleri nelerdir.Bu block düzeyinde elementler ve inline düzeyinde elementler hangileri ve aralarındaki fark nedir, gibi sorulara cevap olacak.

 

display inline-block

CSS de display özelliğinin parametresi olan block ve inline, HTML elementlerinin görünümünü belirlemede kullanılır.

Block değeri alan bir eleman, bulunduğu satırı kaplar ve kendinden sonra gelen elemanı yeni bir satırda başlatır.Blok elementler daha çok paragraflar gibi bölüm bölüm olan yapıları elde etmek için kullanılır.

İnline değeri alan elaman/lar ise bir alt satıra geçmeyerek aynı satırda sıralanır.İnline elementler bu paragraflar içerisinde ki yazılara olarak düşünebilirsiniz.

HTML elementleri varsayılan olarak block veya inline değerlerinden birine sahiptir.Block değeri ile gelen elementlere block düzeyinde, inline varsayılan değeri olanlara da inline düzeyinde elementler denir.

HTML elementlerinin varsayılan değerleri değiştirebilir.Blok düzeyindeki bir elemanı display: inline; ile satır düzeyinde bir elamana, inline düzeyindeki bir elamanı da display: block; ile blok düzeyinde bir elemana çevirebilirsiniz.

Varsayılan Değer Olarak:
Block elementlerine örnek : div, ul, li, header, nav, footer, section, h1 (diğer başlık etiketleri), p
İnline elementlere örnek : a, em, i, cite, span, code verilebilir.

Block ve İnline Elementlerin Farkı

Inline Elementler İçin
  • Genişlik (width) ve yükselik (height) değeri alamazlar
  • Float left veya right değeri aldıklarında otomatik olarak block düzeyinde element olurlar
  • Dikeyde hizalama (vertical-align) özelliğini sağlarlar
  • Dikey margin (top-bottom) değeri alamazlar.Yatay margin ve dikey, yatay padding değeri alabilirler
Block Elementler İçin
  • Dikeyde hizalama (vertical-align) özelliğini sağlamazlar
  • Genişlik (width) değeri verilmezse, parent (ana) elementin tamamını kaplarlar
  • Yükselik değeri verilmezse child (çoçuk) elementin değerine göre şekillleinirler
  • Margin ve padding özelliklerini sağlarlar

Display:inline-block Özelliği

HTML elementlerin aldığı CSS display özelliğinin parametreleri olan block ve inline değerleri hakkında azda olsa bilgi sahibi olduğunuzu düşünüyorum.

Şimdi de son zamanlarda kullanımı artan display özelliğinin bir değeri olan bu iki değerinin karşımı olan display:inline-block özelliğine bir göz atalım.

inline-block değeri satırda blok özelliği sağlayan bir parametredir.Bu tanım pek bir şey ifade etmiyorsa, yukarıda eklediğim fotoğrafa bakarsanız daha rahat anlaşılacaktır.

Örnekle de açıklayacak olursak, şöyle ki genişlik ve yükseklik vereceğiniz bir kaç elemanı aynı satırda yan yana hizalamak istiyorsunuz.Bir elemana yükseklik verebilmeniz için onun blok element olması gerek, aynı satırda olmasını istiyorsanız bu defa da onun inline element olması gerek.Bu gibi durumlarda elementlerin display özelliğini inline-block vererek bu sorunu gidermiş olursunuz.

Hangi durumlarda kullanılıyor derseniz, bir çok yer var ama en popüler kullanımı menü yapımında sıkça denk gelirsiniz.

Not: Block elementlerini aynı satırda hizalamak için float:left/right özellği kullanabilirsiniz.Fakat float bazı yerleşim sorunları çıkardığından bunun yerine diaplay:inline-block özellğini tercih edebilirsiniz.

Eğer yazımdan konuyu tam olarak anlamadıysanız yada biraz daha açıklama iyi olur derseniz, bu konu ile ilgili yararlanabileceğiniz bazı dökümanları vermek istiyorum.

Yazı Hakkında

Bu yazımda CSS inline block nedir? nasıl kullanılır? HTML block ve inline düzeyinde elementler nelerdir? aralarında ki farklar nedir gibi sorulara cevap aramaya çalıştık.

Css’in display özelliğinde HTML elementlerine varsayılan özellik olarak tanımlı block ve inline değerlerinden bahsettik.

Burada bu özelliklerin tanımları ve aralarında ki farklar açıklanmıştır. Bonus olarak CSS’in güzel özelliklerinden display:inline-block hakkında açıklama da yapılmıştır.

Daha fazla kaynaktan yararlanılması istendiğinden yazının sonunda internette display özelliği ile ilgili yazılmış bazı yazılara linklere yer verilmiştir.

Bir sonra ki yazı da float ve display:inline-block özelliklerini arka plana atacak, CSS’in eski ama güncellenerek yenilenmiş muhteşem özelliği olan display:flex (namı değer flexbox) özelliğinden bahsedilecektir.

Her türlü düşünceye açığız.Lütfen yorum bırakmayı ihmal etmeyin.Bilgi paylaştıkca çoğalır.Yazımızı beğendiyseniz paylaşın,herkes faydalansın.