CSS Display Kullanımı Ve Örnekleri

CSS’de belkide en çok kullanılan özelliklerden biride display özelliğidir genellikçe web tasarımcılar tarafında gizle-göster olarak kullanılan bu özellik farklı amaçlar içinde kullanılmaktadır. makalenin devamında örnekler ile bu özelliği anlatmaya çalıştım.

CSS Display Kullanımı Ve Örnekleri

CSS Display Kullanımı Ve Örnekleri

Bu makalede display özelliği ve sırasıyla en sık kullanılan none, block, inline, inline-block değerlerinin ne işe yaradıklarını örnekler üzerinden açıklamaya çalışacağım. Tüm örneklerimizde kullanacağımız html kodu şu şekilde olacak.

HTML

None

Öncelikle none değerinden bahsedelim eğer display özelliğine none değeri atarsanız bu özelliğin etkilendiği nesneler görünmez olacaktır aslında arkaplanda kod halen mevcuttur fakat görünmez olacaktır şimdi bununla ilgili bir örnek yapalım.

CSS

Üstteki kodda display:none ile bir, iki ve uc class’larına ait div etiketleri görünmeyecektir sayfada.


Block

Block değeri ile’de nesnenin bir block şeklinde davranmasını sağlayabiliriz bunu en iyi şekilde şöyle anlarız span etiketinin varsayılan display değeri inline’dır ve span etiketleri ile oluşturduğumuzda tarayıcı tarafından yanyana basılacaktır. Eğer span etiketininin display değeri block olarak değiştirilirse span etiketleri sonrasında boşluk bırakıp alt satıra geçecektir. p, div, h1, h2, h3 v.b html elementlerinin default display değerleri block’tur. Bu durumu daha iyi anlayabilmeniz için altta bir görsel paylaştım header(h1,h2 v.b), div, p etiketlerini karışık olarak yazdım fakat hepsinin varsayılan display değerleri block olduğundan bir sonraki elementi alta atmaktadır.

HTML

Şimdi Google Chrome tarayıcısının herhangi bir stil tanımlaması yapmadan üstteki elementlerin display değerlerine varsayılan olarak ne verdiğine gözatalım.

display-block


Inline

Şimdide inline değerinin sayfa üzerinde ne gibi etki oluşturduğunu görelim.

Display inline ile nesnelerin span etiketinde olduğu gibi yanyana tekrar etmesini sağlayabilirsiniz fakat dikkat edilmesi gereken bir durum var inline özelliği verilmiş bir nesnede width, text-align gibi özelliklerin değerleri işlemeyecektir. şimdi inline değeri ile ilgili bir örnek yapalım.

CSS

Sonuç

Üstteki sonuç kısmındada gördüğünüz üzere display özelliğinde inline değeri kullanıldığından bir, iki, uc class’ına sahip div elementleri yanyana basılacak ve width, height özellikleri inline değerinden dolayıda işlemeleyecektir.


Inline-Block

Inline-Block değeride adı üstünde inline ve block karışımıdır etiketler hem yanyana basılmaktadır hemde block olarak width, height değerlerini korumaktadır fakat tek farkı vardır block gibi sonrasında boşluk bırakıp alt satıra geçmemektedir. şimdi bununla ilgili bir örnek yapalım.

CSS

Sonuç

CSS Display Kullanımı Ve Örnekleri
4.4 (87.78%) 18 oy

Bunlar da hoşunuza gidebilir...

8 Cevaplar

  1. kenan dedi ki:

    iyi çalışmalar, paylaşımlarınız çok kaliteli ve işe yarar bilgiler sunuyorsunuz musadeniz olursa bu sayfadan alıntı yapabilirmiyim k.gelsn.

  2. Osman dedi ki:

    Block tam olarak ne ise yarar soyleyebilir misiniz ?

    • Murat ÖNER dedi ki:

      Merhaba osman bey makale içerisindede belirttiğim gibi bir elementin sağ ve solu dolduracak şekilde yatay uzaması ve kendinden sonra ve önceki elementleri yok sayarak yeni bir satırdan kendine özel bir alan kazanmasına yarar örnek olarak bir html dosyası oluşturup div, p, span etitekleri oluşturun span etiketi ve diğer etiketlerden 3-5 tane oluşturun div ve p etiketlerinin default display değerleri block’tur ayrıca span etiketlerinin default değeride inline-block’tur block değerinin ne işe yaradığını oluşturacağınız örnek ile çok daha iyi anlayacaksınız.

  3. Harun UYGUN dedi ki:

    Güzel anlatım teşekkürler.

  4. Faruk dedi ki:

    Çok teşekkür ederim. Gayet başarılı bir çalışma olmuş.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.