CSS “display” Özelliği Kullanımı

Bu yazımızda, CSS “display” özelliği önemini, kullanım şekillerini ve web tasarımındaki rolünü detaylı bir şekilde ele alacağız.

CSS “display” Özelliği

CSS “display” özelliği, web tasarımında bir elemanın nasıl görüntüleneceğini belirleyen kritik bir araçtır. Bu özelliği kullanarak, bir elemanın sayfa üzerinde kapladığı alanı, diğer elemanlarla olan ilişkisini ve genel olarak sayfa düzenini kontrol edebiliriz. Zaten bu açıklama onun neden hayati bir öneme sahip olduğunu ve CSS öğrenmeye yeni başlayanların muhakkak bilmesi gereken konulardan biri olduğunu göstermektedir.

“Peki, neden bu özellik bu kadar kritik?” İlk olarak, modern web tasarımı esneklik ister. CSS, “display” özelliği ile farklı ekran boyutları ve cihazlar için web sayfalarını uyarlamamıza olanak tanır. İster mobil cihazlarda kompakt bir görünüm, isterse masaüstünde geniş bir görünüm olsun, “display” özelliği sahip olduğu değerlerle bu adaptasyonları kolaylaştırır.

“Display” özelliğinin yaygın kullanılan değerleri aşağıdakilerdir:

• block: Elemanı blok seviyesinde gösterir.
• inline: Elemanı satır içi seviyede gösterir.
• inline-block: Elemanı satır içi blok olarak gösterir.
• none: Elemanı sayfada gizler.
• flex: Elemanı esnek bir konteyner yapar.
• grid: Elemanı ızgara bazlı bir konteyner yapar.

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.

See the Pen Untitled by 1kodum (@1kodum) on CodePen.