CSS Dış Boşluk (Margin)
Kutuyu boyuyor, kenarlık çiziyor ve köşeleri yuvarlıyorsunuz. Sıradaki beceri: kutuları birbirinden itmek. margin, öğenin etrafındaki dış boşluktur — kenarlığın dışındaki nefes alanı.
margin nedir?
Margin, öğe kenarlığının dışında boş alandır. Bir kutuyu komşularından ayırır. Öğenin arka planını bu boşluğa boyamaz — boşluk dolu alanın dışındadır.
Margin ile padding (kısa karşılaştırma)
Padding (sonraki ders) kenarlığın içindedir — içerik ile kenar arasında. Margin kenarlığın dışındadır — bu kutu ile sonraki arasında. Bugün bir satır aklınızda kalsın: margin = dış, padding = iç.
Kısayol: kaç değer?
Bir, iki, üç veya dört uzunluk verebilirsiniz. Kenar sırası sabittir.
📊 margin kısayol değer sayısı
| Değer | Anlam | Günlük not |
|---|---|---|
| 1 | Dört kenar aynı | Kart çevresinde eşit nefes |
| 2 | Üst+alt, sonra sol+sağ | Dikey ve yatay çiftler |
| 3 | Üst, sol+sağ, alt | Daha az yaygın — varlığını bilin |
| 4 | Üst, sağ, alt, sol | Tam kontrol, üstten saat yönü |
Her kenarda aynı boşluk
Tüm kenarlar için tek uzunlukla başlayın.
Tüm kenarlarda aynı margin
css.card {
margin: 16px;
border: 1px solid #cbd5e1;
padding: 1rem;
background-color: #ffffff;
}İki değer — dikey, sonra yatay
İki uzunluk karşıt kenarları eşler: önce üst ve alt; sonra sol ve sağ.
Dikey sonra yatay margin
css.panel {
margin: 24px 12px;
border: 1px solid #94a3b8;
padding: 1rem;
background-color: #f8fafc;
}Dört değer — üstten saat yönü
Her kenar kendi boşluğunu istediğinde: üst → sağ → alt → sol.
Dört kenarlı margin kısayolu
css.note {
margin: 8px 20px 32px 20px;
border: 1px solid #0f766e;
padding: 0.75rem;
background-color: #ecfdf5;
}auto ile bloğu ortalamak
Sabit genişlikli blok düzeyinde kutu için margin-left: auto ve margin-right: auto (sıkça margin: 0 auto) kalan alanı iki yana eşit böler — yatay ortalamanın klasik yolu.
auto ile yatay ortalama
css.box {
width: 280px;
margin: 0 auto;
border: 2px solid #0f766e;
padding: 1rem;
background-color: #f0fdfa;
}Dikey marginler çökebilir
İki blok öğe üst üste geldiğinde, birincinin alt margin’i ile ikincinin üst margin’i çoğu zaman tek boşlukta çöker (collapse) — genelde ikisinin büyüğü, toplamı değil. Yeni başlayanları şaşırtır; üst üste paragraflar ve bölümler arasında bunu bekleyin.
Üst üste bloklar ve margin collapse
css.block-a {
margin-bottom: 24px;
background-color: #ccfbf1;
padding: 0.5rem;
}
.block-b {
margin-top: 24px;
background-color: #99f6e4;
padding: 0.5rem;
}
/* Aralarında çoğu zaman yaklaşık 24px görürsünüz, 48px değil */Bir kenar bir seferde
margin-top gibi uzun yazımlar yalnızca başlığın üstünde veya düğmenin altında yer istediğinizde mükemmeldir.
Yalnızca üst margin
css.section-title {
margin-top: 2rem;
margin-bottom: 0.5rem;
margin-left: 0;
margin-right: 0;
}Kendiniz deneyin
- İki karta
margin: 16pxverin ve dış boşluğu izleyin. - Birini
margin: 24px 12pxyazın; dikey ile yatayı fark edin. - 280px genişlikte bir kutuyu
margin: 0 autoile ortalayın. - İkisi de
24pxolanmargin-bottomvemargin-topile iki renkli bloğu üst üste koyun — boşluk 24 mü 48 mi görünüyor? - Bir başlığı yalnızca
margin-topile aralayın.
Yaygın hatalar
- Aslında padding isterken margin kullanmak (metin için iç yastık)
margin: autonun her flex/grid öğeyi basit blok gibi ortalayacağını sanmak (düzen bağlamı önemli)- Üst ve alt margin ekleyip her zaman toplandıklarını varsaymak (collapse boşluğu küçültebilir)
- Her yerde dev margin yerine küçük, tutarlı bir ölçek
- Dört değer sırasını karıştırmak (üst, sağ, alt, sol)
Özet
- Margin kenarlığın dışındaki dış boşluktur
- Kısayol: 1, 2 veya 4 değer (dört üstten saat yönü)
margin: 0 autogenişliği belli bloğu yatay ortalar- Üst üste bloklar arasında dikey marginler çökebilir
- Tek kenar için uzun yazımları kullanın
- Padding iç kuzen — sonraki ders
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 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