Yükleniyor...

CSS İç Boşluk (Padding)

Margin kutuları ayırır. Çoğu zaman kutunun içinde de yer gerekir — metin kenarlığa yapışmasın, düğmeler rahat dokunulsun. Bu iç yastık padding.

padding nedir?

Padding, bir öğenin içeriği ile kenarlığı arasındaki boş alandır. Kenarlığın içinde yaşar. Padding büyüdükçe içerik kenarlardan uzaklaşır ve kutu çoğu zaman büyür (sonra box-sizing değiştirmezseniz).

Padding ile margin bir bakışta

Karıştırmak kolaydır. İşleri ayrı tutun.

📊 Padding ile margin

Araç Nerede oturur Günlük iş
padding Kenarlığın içinde Metni yastıklamak, tıklama alanını büyütmek
margin Kenarlığın dışında Bu kutuyu komşulardan ayırmak
Arka plan Genelde padding’i doldurur Renk/görsel çoğu zaman yastığı kaplar
Dikey collapse Padding çökmez Üst üste blokların margin’leri çökebilir

Her kenarda aynı padding

Sakin bir kart için tek uzunlukla başlayın.

Tüm kenarlarda aynı padding

css
CSS Code 
.card {
padding: 16px;
border: 1px solid #cbd5e1;
background-color: #ffffff;
margin: 12px; /* dış boşluk — başka araç */
}

Ne görmelisiniz?

Metin gri kenarlıktan uzak oturur. Beyaz arka plan padding bölgesini de doldurur — yalnızca harfleri değil.

İki değer — dikey, sonra yatay

İki uzunluk karşıt kenarları eşler: önce üst ve alt; sonra sol ve sağ.

Dikey sonra yatay padding

css
CSS Code 
.panel {
padding: 20px 12px;
border: 1px solid #94a3b8;
background-color: #f8fafc;
}

Dört değer — üstten saat yönü

Her kenar kendi yastığını istediğinde: üst → sağ → alt → sol.

Dört kenarlı padding kısayolu

css
CSS Code 
.note {
padding: 8px 16px 24px 16px;
border: 1px solid #0f766e;
background-color: #ecfdf5;
}

Düğmeler padding sever

Padding, etiket metninin boyutunu değiştirmeden rahat dokunma alanını büyütür. Cömert padding’li kısa etiket modern ve tıklaması kolay hissedilir.

Padding’li düğme

css
CSS Code 
.btn {
padding: 0.6rem 1.25rem;
border: none;
border-radius: 8px;
background-color: #0f766e;
color: #ffffff;
}

Arka plan padding’i doldurur

Margin’den (dışarı) farklı olarak padding hâlâ öğenin boyalı kutusunun parçasıdır. Arka plan rengi veya görseli genelde padding bölgesini kaplar.

Renkli padding bölgesi

css
CSS Code 
.banner {
padding: 24px;
background-color: #0f766e;
color: #ffffff;
border: 4px solid #042f2e;
}

Kendiniz deneyin

  1. padding: 16px ve görünür kenarlıklı kart — metin kenara yapışmasın.
  2. padding: 20px 12px yazın; daha uzun vs daha geniş yastığı hissedin.
  3. Dikeyden daha fazla yatay padding’li düğme.
  4. Büyük padding ve daha koyu kenarlıklı turkuaz afiş — renk yastığı doldurur.
  5. Aralarında yalnızca margin olan iki kart, sonra birinin içinde yalnızca padding — farklı işleri hissedin.

Yaygın hatalar

  • Kutuları ayırmak için padding kullanmak (o margin’in işi)
  • Kardeşler arasında padding’in dikey margin gibi çökeceğini sanmak (çökmez)
  • Arka planın genelde padding bölgesinden boyandığını unutmak
  • Mütevazı ölçek daha temizken her kenarda dev padding
  • Dört değer sırasını karıştırmak (üst, sağ, alt, sol)

Özet

  • Padding içerik ile kenarlık arasındaki iç boşluktur
  • Kısayol: 1, 2 veya 4 değer (dört üstten saat yönü)
  • Arka plan genelde padding bölgesini doldurur
  • Padding, dikey margin’lerin yapabildiği gibi çökmez
  • Düğmeler ve kartlar konfor için padding’e yaslanır
  • Margin dış kuzen olarak kalır — her iki aracı keskin tutun

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
8
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 1 / 1
Css Ders