CSS display Özelliği Nedir ve Nasıl Kullanılır?

CSS display özelliği HTML etiketlerinin görünüm özelliklerini belirler. Genel yapısı aşağıdaki gibidir.

Bu özellik bir elemanı oluşturan kutu tipini belirler. Bu özelliğin diğer özellikler ile birçok etkileşimli durumları vardır. HTML elemanlarını başlangıçta blok seviyeli ve satır içi seviyeli olarak tanımlıdır. Ancak biz bu elemanların başlangıç değerlerini display özelliği ile değiştirebiliriz. Yani biz bir satır içi seviyedeki elemanı örneğin bir linki ( <a> …. </a> ) blok seviyeden bir elemana dönüştürebiliriz. Aynı şekilde bir blok seviyedeki elemanı satır içi seviyeden bir elemana dönüştürebiliriz.

block: Bu değer bir elemanın blok element (<p>) gibi davranmasını sağlar. Yükseklik ve genişlik ayarları ile oynanabilir.

inline: Bu değer bir elemanın satır içi element (<span>) gibi davranmasını sağlar. Yükseklik ve genişlik ayarları ile oynanamaz.

inline-block: Bu değer elemanın bir satır içi element gibi davranmasını sağlar ancak yükseklik ve genişlik değerleri ile de oynanabilir.

none: Bu değer bir elemanın gözükmemesini sağlar. O elemanın orada yokmuş gibi olmasını sağlar.

table, inline-table, table-row-group, table-column, table-columngroup, table-header-group, table-footer-group, table-row, tablecell ve table-caption: Bu degerler bir elemanın bir tablo elemanı gibi davranmasına sebep olur.

p
{
display: inline;
}
span
{
display: block;
}

CSS display özelliği konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.

https://yazilimdelisi.com/category/web-gelistirme/css/

Sosyal Medya Hesaplarımız

Son Eklenen Yazılar