CSS kutusu: margin, padding ve border
Dış boşluk margin, iç boşluk padding, çizgi ise border'dır.
Tüm dersler · CSS dersleri: renk, kutu ve hover
Üç boşluk
Her öğe bir kutudur. border çizgidir. padding çizginin içindeki boşluktur. margin kutunun dışındaki boşluktur.
.card {
margin: 16px;
padding: 12px;
border: 1px solid #2f6bff;
background: #101826;
color: white;
}Hangisi ne zaman
Yazı kutunun kenarına yapışmışsa padding artır. İki kutu birbirine değiyorsa araya margin koy. Çizgi görünmüyorsa border yaz.
Sorular
margin ve padding aynı mı? Hayır. margin dışta, padding içte.
16px nedir? 16 piksel. Ekranda küçük bir boşluktur.
border yazılmazsa ne olur? Kutu kalır, ama çizgi görünmez.
Renk nereye gider? background kutunun içini, color yazıyı boyar.