Web sayfalarında HTML öğelerinin nasıl yerleşeceğini belirlemek için display (görüntüleme) özelliği kullanılır. Display, bir öğenin diğer öğelerle nasıl etkileşime gireceğini ve nasıl görüneceğini belirler.
Bu yazıda CSS display özelliğini detaylı bir şekilde ele alacağız. Block, inline ve inline-block gibi temel display değerlerini açıklayarak, öğelerin nasıl davrandığını örneklerle anlatacağız. Eğer CSS’e yeni başlıyorsanız, display özelliğini anlamak öğelerin konumlandırılması ve düzenlenmesi açısından oldukça önemlidir.
1. Display Nedir?
Display, bir öğenin blok, satır içi (inline) veya karma (inline-block) olarak görüntülenmesini belirleyen bir CSS özelliğidir.
HTML öğeleri varsayılan olarak block veya inline olabilir:
- Block Öğeler
- Tüm satırı kaplar.
- Yeni bir satıra geçerek diğer öğeleri altına iter.
- Genişlik, yükseklik, margin ve padding özellikleri geçerlidir.
- Örneğin:
<div>, <p>, <h1>, <section>, <article>
- Inline Öğeler
- Sadece içeriği kadar yer kaplar.
- Yan yana dizilir, genişlik ve yükseklik değerleri geçerli olmaz.
- Örneğin:
<span>, <a>, <strong>, <em>
Örneğin, aşağıdaki HTML yapısında <h1> bir block öğedir, <span> ise inline öğedir:
<h1>Bu bir başlık</h1> <!-- Block: Yeni satıra geçer -->
<span>Bu bir satır içi öğe</span> <!-- Inline: Yan yana yerleşir -->
<span>Bir başka inline öğe</span> <!-- Inline: Yan yana durur -->
Görünümü:
Bu bir başlık (block, yeni satıra geçer)
Bu bir satır içi öğe Bir başka inline öğe (Yan yana)
2. Display: Block ve Inline Kullanımı
Block Öğeler
Block öğeler tüm satırı kaplar ve genişlik/yükseklik gibi özellikleri alabilir.
h1 {
display: block;
width: 300px;
height: 100px;
background-color: lightblue;
}
Özellikleri:
- Yeni satıra geçer.
- Genişlik ve yükseklik alır.
- Margin ve padding uygulanabilir.
Inline Öğeler
Inline öğeler sadece içerikleri kadar alan kaplar, genişlik ve yükseklik ayarlanamaz.
span {
display: inline;
width: 200px; /* Çalışmaz */
height: 50px; /* Çalışmaz */
background-color: lightgreen;
}
Özellikleri:
- Aynı satırda diğer öğelerle birlikte görüntülenir.
- Genişlik ve yükseklik ayarlanamaz.
- Margin ve padding yatay yönde çalışır (dikeyde çalışmaz).
3. Display: Inline-Block Nedir?
Inline-block, hem inline öğeler gibi yan yana durur hem de block öğeler gibi genişlik ve yükseklik alabilir.
button {
display: inline-block;
width: 150px;
height: 50px;
background-color: orange;
text-align: center;
}
Bu özellik, butonları ve menü öğelerini tasarlarken blok öğeler gibi görünmesini, ancak inline öğeler gibi yan yana durmasını sağlar.
4. Display Kullanım Örnekleri
Örnek 1: Inline ve Block Öğeler Arasındaki Fark
<h1>Bu bir block öğedir</h1>
<span>Bu bir inline öğedir</span>
<span>Bir başka inline öğe</span>
CSS ile Görünümü:
h1 {
display: block;
background-color: lightblue;
}
span {
display: inline;
background-color: lightgreen;
}
Sonuç:
Bu bir block öğedir (Yeni satır)
Bu bir inline öğedir Bir başka inline öğe (Yan yana)
Örnek 2: Block’u Inline’a Çevirme
h1 {
display: inline;
background-color: pink;
}
Bu kod, normalde block olan <h1> öğesini inline yapar, böylece yan yana dizilebilir hale gelir.
Örnek 3: Inline Öğeyi Block’a Çevirme
span {
display: block;
background-color: lightgray;
}
Bu kod, normalde inline olan <span> öğesini block yaparak her biri ayrı satırda görünmesini sağlar.
5. Display: None ile Öğeleri Gizleme
Bazı durumlarda bir öğeyi tamamen gizlemek isteyebiliriz. Display: none, öğeyi DOM’da tutar ama ekranda hiç yer kaplamaz.
h1 {
display: none;
}
Bu durumda <h1> etiketi HTML’de var olmaya devam eder, ancak görünmez hale gelir.
Görsel olarak hiç yer kaplamadığı için, öğe sayfa düzenine dahil edilmez. JavaScript ile display: none kullanarak bir öğeyi gizleyip göstermek yaygın bir tekniktir.
6. Display Kullanım Özet Tablosu
En çok kullanılan display değerlerini içeren bir tablo:
| Display Değeri | Açıklama |
|---|
block | Tüm satırı kaplar, genişlik/yükseklik alır. (Örn: <div>, <p>) |
inline | Aynı satırda durur, genişlik/yükseklik almaz. (Örn: <span>, <a>) |
inline-block | Yan yana durur, genişlik/yükseklik alabilir. (Örn: <button>, <img>) |
none | Öğeyi gizler, hiçbir yer kaplamaz. |
flex | Öğeleri hizalama ve dağıtma için esnek bir düzen sunar. (Flexbox) |
inline-flex | Flexbox gibi çalışır, ancak inline davranır. |
grid | Öğeleri 2D ızgara düzeninde hizalar. (CSS Grid) |
Bunlar web tasarımında en yaygın kullanılan display değerleridir. Flexbox ve Grid, modern düzenlerde büyük avantaj sağlar. Özellikle hizalama, düzenleme ve esneklik açısından büyük kolaylık sunarlar.
7. Display Kullanırken Dikkat Edilmesi Gerekenler
- Blok öğeleri inline yapmak mümkündür, ancak inline öğeleri block yapmadan genişlik/yükseklik veremezsiniz.
- Inline öğelerde yalnızca yatay margin ve padding çalışır, dikey margin ve padding genellikle göz ardı edilir.
- Display: none, öğeyi tamamen gizlerken, visibility: hidden öğeyi görünmez yapar ama yerini korur.
- Inline-block öğeler, buton ve menü tasarımlarında yaygın olarak kullanılır.
Sonuç
CSS Display, HTML öğelerinin nasıl görüntüleneceğini belirleyen en önemli özelliklerden biridir.
Öğrendiğimiz konular:
- Block, inline ve inline-block farkları
- Genişlik, yükseklik, margin ve padding’in etkileri
- Öğeleri görünmez yapmak için display: none kullanımı
- Öğeleri satır içi veya blok olarak değiştirmek
Bu bilgilerle artık öğeleri nasıl konumlandıracağınızı ve düzenleyeceğinizi biliyorsunuz. CSS ile esnek ve düzenli tasarımlar oluşturmak için display özelliğini kullanmaya başlayabilirsiniz.