CSS Display

0 221

CSS Display özelliği Css kapsamında çok önemli bir rol oynamaktadır. Bildiğimiz üzere Html kodlarında her bir etiket varsayılan olarak bir gruba atanmıştır. Bu gruplar Inline ve Block olmaz üzere ikiye ayrılmaktadır. Bütün etiketler ya Inline ya da Block olmak zorundadır. Tabi bunların başka özellikleri de var ancak bu özelliklere CSS Display özelliği kullanarak erişmek mümkündür.

Inline ve Block Nedir?

Html sayfalarına eklediğimiz her nesne sayfanın üst sol kısmından başlayarak eklenir. Dikkat etmişinizdir ki; bu eklediğimiz nesnelerden bazıları yan yana gelirken (<span>, <a>, <i>) bazı nesneler ise (<div>, <p>, <ul>, <li>) alt alta gelmektedir. İşte bu yan yana gelen nesnelere Inline etiket ve alt alta gelen etiketlere ise Block etiket denir.

CSS Display Kullanımı

CSS Display özelliği çok fazla değer almaktadır ancak bu makalemizde sadece aldığı 3 değerden bahsedeceğiz bunlar;

  • Inline
  • Block
  • None

1.Inline

Inline etiket (<span>, <a>, <i>) yanlızca içerik kadar yer kaplamaktadır. Bu yüzden de genişlik ve yükseklik verilemez. Yükseklik ve genişlik verilemediği için haliyle arkaplan rengi de yalnızca yazının arkasını kapsayacaktır. Inline etiketler boşluk olduğu sürece sırayla dizilmektedir bir satırda boşluk bitmeden bir alt satıra inmezler.

<span class="s1">Legal</span>
<span class="s2">-</span>
<span class="s3">Yazılım</span>
<style>
    span{
        border: 2px solid black;
        padding: 25px;
        color: blue;
    }
    s1{ background-color: green; }
    s2{ background-color: red; }
    s3{ background-color: yellow; }
</style>


Legal Yazılım

2. Block

Block etiket (<div>, <p>, <ul>, <li>) satırı komple kaplamaktadır. Genişlik ve yükseklik verilebilir. Yükseklik ve genişlik verildiği için haliyle arkaplan rengi verilen yükseklik ve genişliği kapsayacaktır. Block etiketler alt alta sıralanmaktadır. Boşluk olması durumunda bile yan yana gelmezler. Bir Block etikete genişlik verilmediği sürece satırı kaplar.

<div class="s1">Legal</div>
<div class="s2">-</div>
<div class="s3">Yazılım</div>
<style>
    div{
        border: 2px solid black;
        padding: 25px;
        color: blue;
    }
    s1{ background-color: green; }
    s2{ background-color: red; }
    s3{ background-color: yellow; }
</style>
Legal
Yazılım

3. None

Bir elementi gizlemek istediğimizde bu element inline ya da block olması farketmez None özelliğini kullanabiliriz. Bu sayede element bulunduğu alanda hiçbir etki oluşturmaksızın gizlenecektir.

<div class="s1">Legal</div>
<div class="s2">-</div>
<div class="s3">Yazılım</div>
<style>
    div{
        border: 2px solid black;
        padding: 25px;
        color: blue;
    }
    s1{ background-color: green; }
    s2{ background-color: red; display: none;}
    s3{ background-color: yellow; }
</style>
Legal
Yazılım


Varsayılan Display Özelliği Nasıl Değiştirilir?

Css display özelliği aşağıdaki değerleri alabilir. display: inline | block | inline-block | none; Burada dikkat edilmesi gereken display: inline kullanarak block etiketi inline etikete çevirmemiz durumunda nesneler için tanımlanan yükseklik ve Genişlik değerinin etkin olmadığıdır. Çünkü inline etiketler için yükseklik ve genişlik verilemez.

NOT: Float uygulanan bir nesne her zaman Block özelliği taşımaktadır. Haliyle <div> için float özelliği kullandığımızda <div> etiketlerine inline demiş olmamıza rağmen yükseklik ve genişlik verebilecek duruma geldi.

Bir nesne inline ise yükseklik ve genişlik veremiyoruz. Block ise bunları yan yana getiremiyoruz çünkü satırı olduğu gibi kaplıyor. Peki bir durumda hem yükseklik-genişlik vermek istedik hem de bunları yan yana getirmek istedik. Bunu nasıl yapacaz? işte tam da burada devreye ortak özellik devreye giriyor. Eğer ki bir nesneyi display: inline-block yaparsak bu duruma bir çözüm bulmuş oluruz. Yani display: inline-block olan bir nesne hem inline gibi satırda yan yana gelir hem de bu nesnelere block nesneler gibi yükseklik ve genişlik değerleri verebiliriz.

Cevap bırakın

E-posta hesabınız yayımlanmayacak.