- Konu sahibi
- #1
HTML padding nedir?
HTML’de sıkça “padding” olarak anılsa da padding, HTML etiketinin değil CSS’in bir özelliğidir. Bir elementin içeriği ile kenarlığı arasındaki iç boşluğu belirler. Örneğin bir kutunun içindeki yazının kenarlığa yapışmasını önlemek için kullanılır. Elementin dışındaki komşu elementlerle mesafeyi ayarlamak için ise
margin kullanılır.Padding nasıl çalışır?
Bir kutuyu içeriden genişletir: metin, görsel veya diğer içerik ile
border arasında boşluk bırakır. Arka plan rengi veya görseli genellikle bu iç boşluk alanında da görünür. CSS özelliğinin başlangıç değeri 0 olsa da tarayıcı bazı HTML öğelerine kendi stilinden padding verebilir.Çalıştırılabilir örnek
Aşağıdaki dosyayı
padding-ornek.html adıyla kaydedip tarayıcıda açın:
HTML:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Padding örneği</title>
<style>
.kutu {
width: 220px;
padding: 20px;
border: 2px solid #333;
background: #e8f2ff;
}
</style>
</head>
<body>
<div class="kutu">Bu yazı kenarlığa yapışık değildir.</div>
</body>
</html>Beklenen sonuç, metnin etrafında 20 piksel iç boşluk bulunan açık mavi bir kutudur. Kenarlık ile yazı arasındaki mesafe değişiyorsa padding çalışıyor demektir. Değişiklik görünmüyorsa CSS seçicisinin HTML’deki sınıfla eşleştiğini ve dosyanın gerçekten kaydedilip yenilendiğini kontrol edin.
Bu örnekte content-box kullanılır:
220 + 20 + 20 + 2 + 2 = 264px toplam genişlik oluşur. width: 220px yalnız içerik alanını belirtir. Varsayılan kutu modelinde padding ve border bu genişliğin üzerine eklenebilir. Kutunun toplam genişliğini daha öngörülebilir yapmak için şu kural kullanılabilir:
CSS:
.kutu {
box-sizing: border-box;
}Böylece belirtilen
width değeri içerik, padding ve border alanlarını birlikte kapsar. Ancak bu kural, içeriğin kullanılabilir alanını azaltabileceği için geniş kutularda metin satırlarının değişmesine neden olabilir.Padding dört yönde ayrı ayrı tanımlanabilir:
| Yazım | Uygulanan yön | Örnek |
|---|---|---|
| Tek değer | Dört yön | padding: 16px; |
| İki değer | Üst-alt | sağ-sol | padding: 10px 20px; |
| Üç değer | Üst | sağ-sol | alt | padding: 10px 20px 30px; |
| Dört değer | Üst | sağ | alt | sol | padding: 10px 20px 30px 40px; |
Dört değer kullanıldığında sıra saat yönündedir: üst, sağ, alt, sol. Yalnızca tek bir kenarı değiştirmek için
padding-top, padding-right, padding-bottom veya padding-left yazılabilir.Padding mi, margin mi?
Yazı ile kutunun kenarı arasındaki boşluğu artırmak istiyorsanız padding kullanın. İki ayrı kutunun birbirinden uzaklaşmasını istiyorsanız margin kullanın. Padding elementin iç alanını büyütür; margin ise elementin dışındaki yerleşimi etkiler.
Mobil uyumlu veya farklı yazı yönlerini destekleyen tasarımlarda fiziksel yönler yerine
padding-block ve padding-inline gibi mantıksal özellikler tercih edilebilir. Sabit bir görünüm için piksel, yazı boyutuna göre ölçeklenen boşluk için em veya rem kullanılabilir. Negatif padding değeri geçerli değildir.Sık sorulan sorular
Yüzdeyle verilen üst padding neden yüksekliğe göre hesaplanmıyor?
Yatay yazı düzeninde yüzde padding değerleri, üst ve alt kenarlarda da kapsayıcının genişliğine göre çözülür. Bu yüzden
padding-top: 10% kutunun kendi yüksekliğinin onda biri değildir. Sonucu geliştirici araçlarındaki hesaplanan piksel değerinden kontrol edin.Padding ile içeriği ortalayabilir miyim?
Padding yalnızca iç boşluk oluşturur, tek başına içeriği geometrik olarak ortalamaz. İçeriği yatay veya dikey ortalamak için genellikle
display: flex ile justify-content ve align-items özellikleri birlikte kullanılır.
