CSS “Display” Özelliği

CSS display özelliği, web tasarımında elemanların nasıl görüntüleneceğini belirlemek için kullanılan en temel ve güçlü araçlardan biridir. Bu özellik, bir elemanın yerleşimini, diğer elemanlarla olan etkileşimini ve sayfa düzeni üzerindeki genel etkisini kontrol eder.

Web tasarımı, farklı cihazlara ve ekran boyutlarına uyum sağlamak zorundadır. İşte tam da bu noktada display özelliği devreye girer. Örneğin, mobil cihazlarda daha dar bir düzen gerekebilirken, masaüstü ekranlarında geniş ve ferah bir yerleşim istenir. Display özelliği, bu uyarlamaları kolaylaştıran değerler sunar. Böylece, kullanıcı deneyimi her cihazda tutarlı ve etkileyici hale gelir.

“Display” özelliğinin ile kullanılan değerler şunlardır:

1. block: Eleman, sayfada bir blok alanı kaplar ve altındaki elemanları bir sonraki satıra iter. Başlıklar (<h1>, <p>) gibi elemanlar genellikle bu şekilde davranır.
2. inline: Eleman, yalnızca içeriği kadar yer kaplar. Metin içinde kullanılan <span> gibi etiketler bu davranışa sahiptir.
3. inline-block: Hem içerik kadar yer kaplar hem de genişlik ve yükseklik gibi özellikler uygulanabilir.
4. flex: Esnek düzenler oluşturmak için kullanılır. Modern web tasarımında çok popülerdir ve düzeni kolayca kontrol etmenizi sağlar.
5. grid: Daha karmaşık ve iki boyutlu düzenler oluşturmak için ideal bir seçenektir.
6. none: Elemanı sayfada gizler.

HTML’deki her bir element, varsayılan olarak belirli bir display değerine sahiptir. Bu varsayılan değerler, tarayıcı tarafından tanımlanan stil özellikleriyle gelir. Dolayısıyla konumlandırma yaparken hangi elementin hangi varsayılan değere sahip olduğunu bilmek önemlidir.

Bu konuda en çok gözümüze çarpan ise display: block; ve display: inline; özellikleridir. Bu ikisi CSS’teki display özelliğinin en yaygın olarak kullanılan değerlerindendir. Bu iki değer, temel HTML elemanlarının çoğunun varsayılan görüntülenme biçimini tanımlar ve web tasarımında sıkça karşılaşılan düzenleme ihtiyaçlarına cevap verir.

display: block Kullanımı

Blok seviye elemanlar, web sayfasında geniş bir alana yayılırlar ve genellikle tam bir satırı kaplarlar. Bu yapı, içerikleri bölümlere ayırmada oldukça işlevseldir. Biz, bu elemanları özellikle belirgin ve net bölümler oluşturmak istediğimizde tercih ederiz.

Boyutlandırma ihtiyaçlarınız varsa, bu eleman türüne yükseklik ve genişlik gibi özellikleri rahatlıkla uygulayabiliriz. En yaygın kullanılan blok seviye elemanları arasında <div>, <p>, <h1>…<h6>, <ul> ve <ol> bulunmaktadır.

display: inline Kullanımı

Satır içi elemanlar yalnızca kendi içeriği kadar yer kaplar ve diğer inline elemanlarla aynı satırda kalır. Haliyle, yükseklik ve genişlik gibi boyutlandırma özellikleri bu eleman türüne doğrudan uygulanamaz.

Yaygın satır içi elemanlar arasında <span>, <a>, <strong> ve <em> yer alır. Bu elemanlar sayesinde metin içerisinde bağlantılar ekleyebilir, belirli kelimeleri vurgulayabilir veya metni özelleştirebiliriz. Bu elemanların uygulandığı yerlerde, genellikle detaylı ve özelleştirilmiş düzenlemelerle karşılaşırız.

display: inline-block Kullanımı

“Inline-block” özelliği, adından da anlaşılacağı üzere “inline” ve “block” özelliklerinin bir kombinasyonudur. Bu özellik sayesinde elemanlar, satır içi elemanlar gibi davranırken, blok elemanlarının sahip olduğu boyutlandırma özelliklerine de sahip olabilirler.

Yani, “inline-block” özelliği, elemana yükseklik (height) ve genişlik (width) gibi boyutlandırma özellikleri uygulamamıza olanak tanımasının yanı sıra aynı zamanda diğer satır içi elemanlar gibi aynı satırda kalabilir. Özellikle, yatay olarak yan yana düzenlenmiş yükseklik ve genişlik, padding ve margin gibi değerleri verilmiş kutular oluşturmak istediğimizde oldukça kullanışlıdır.

Bu üç “display” değeri, özellikle başlangıç seviye web tasarımında ve geliştirmede sıkça kullanılır. Ancak modern web tasarımında, daha karmaşık düzen ihtiyaçlarına cevap vermek için display: flex; ve display: grid; gibi daha gelişmiş değerler de popülerlik kazanmıştır. Ancak bunlar başka dersin konusu olduğu için yazıyı uzatmamak için buraya eklemedik.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Display Özelliği</title>
  <style>
    span.a {
      display: inline; /* Varsayılan display değeri */
      width: 100px;
      height: 100px;
      padding: 5px;
      border: 1px solid blue;
      background-color: yellow;
    }

    span.b {
      display: inline-block;
      width: 100px;
      height: 100px;
      padding: 5px;
      border: 1px solid blue;
      background-color: yellow;
    }

    span.c {
      display: block;
      width: 100px;
      height: 100px;
      padding: 5px;
      border: 1px solid blue;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <h1>display Özelliği</h1>

  <h2>display: inline</h2>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. 
    <span class="a">Aliquam</span> 
    <span class="a">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
  </div>

  <h2>display: inline-block</h2>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. 
    <span class="b">Aliquam</span> 
    <span class="b">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
  </div>

  <h2>display: block</h2>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. 
    <span class="c">Aliquam</span> 
    <span class="c">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
  </div>
</body>
</html>