CSS Display Özelliği

CSS display özelliği sayfa yapısını ayarlamak için CSS içerisinde çok önemli bir yere sahiptir.Bu konuyu anlamazsanız bir çok şeyi yapamazsınız.

Display (Görünüm)  Özelliği

Elementlerin sayfada görünüm özelliklerini ayarlamak için display özelliği kullanılır.HTML elementleri görünümsel olarak blok düzeyi ve satır düzeyi element olarak ikiye ayrılır.
Elementler varsayılan olarak bu iki tipten biri olarak gelse de CSS display özelliği ile elementlerin varsayılan görünüm özelliklerini değiştirebilirsiniz.Bunun için blok ve satır düzeyi elementlerin farkını anlamanız önemlidir.

HTML block ve inline elementler yazıma bakmanızı şiddetle öneririm.Ayrıca son zamanlarda oldukça popüler olan display flex özelliği hakkındaki detaylı yazıma da bakmayı unutmayın.

Blok Düzeyi Elemetler

Blok düzeyi elementler, genişlikleri ne olursa olsun bulunduğu satırı kaplayan, ve kendisin den sonra gelen elementleri yeni bir satırdan başlatan elementlerdir.HTML de paragraf oluşturmak için kullandığımız <p> elementlerinin hep yeni bir satırdan başladığını biliyorsunuzdur.Çünkü <p> etiketinin varsayılan display özelliği display:block şeklindedir.Bu elementler blok düzeyinde element olarak bilinir.

Örneklerde sıkça kullandığım div,başlık etiketleri (h1-h6), header,footer,section gibi çok kullanılan etiketler blok düzeyi elementlerdir.

Satır Düzeyi Elementler

Satır düzeyi elementler yeni bir satırdan başlamazlar.Bulundukları satırda devam ederler.HTML de iki tane satır düzeyi element tanımlarsanız, bu iki elementin aynı hizada(yani satırda) olduğunu görürsünüz.Ama Bir tane blok düzeyi elementle tanımlanırsa, blok düzeyi elementin bütün bir satırı kaplamasından dolayı alt tarafa geçtiğini göreceksiniz.

span,em,i gibi HTML etiketleri varsayılan olarak satır düzeyi elementlerdir.

Satır Düzeyi Elementleri Kutu Modeli
CSS kutu modeli konusunda satır düzeyi elementlerin kutu modelinin farklı olduğunu belirtmiştim ama nedenini açıklamamıştım.Burada açıklamakta fayda var.

Satır düzeyi elementlere width ve height değerleri veremezsiniz.Genişlikleri ve yükseklikleri içerikleri kadardır.Yani içerisinde bir yazı varsa genişliği yazının uzunluğu kadar, yüksekliği de yazının boyutu kadardır.

Satır düzeyi elementlere margin değeri sadece yatayda verilebilir.Yukarı(top), ve aşağı margin değerleri almazlar.Padding değerini dikey de ve yatay da alırlar ama dikey padding değeri, diğer elementleri etkilemez.

Bu nedenle kutu modeli daha çok blok düzeyi elementler için ifade edilir.Satır düzeyi elementler için daha çok satır kutu modeli tabiri daha uygun olacaktır.Kutu modelini, blok ve satır düzeyi elementlerin ne olduğunu iyice anladıysanız ifadelerin o kadar da önemi yok.

Display:none ile Görünümü Gizlemek

Display özelliğinin elementleri gizlemek için none değeri vardır.Bazen bir olay(event) gerçekleştiğinde elementlerinin görünümün gizlemesi gerekebilir.Bu durumda display:none kullanılır.Elemanları gizlemek için farklı yöntemlerde vardır.Bunları öğrenmek için HTML elementlerini gizleme yöntemleri yazıma bakmanızı öneririm.

Son olarak:

CSS display özelliği anlaşılması oldukça önemli yapılsa özelliklerden biridir.

Bütün CSS Dersleri için tıklayın

Bunları da beğenebilirsin