The Box Model
Har HTML element ek "box" hai jiske 4 layers hain (andar se bahar): content (actual text/image), padding (content aur border ke beech ki jagah), border (box ki boundary line), margin (border ke bahar, doosre elements se space).
box-sizing property decide karti hai width/height calculation mein padding/border include hain ya nahi — content-box (default, padding/border ADD hote hain width mein — confusing) vs border-box (padding/border width ke ANDAR count hote hain — much more intuitive, modern default).
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
box-sizing: border-box; /* padding+border width ke ANDAR — total 200px */
/* box-sizing: content-box (default) hota to total 250px hota (200+40+10) */
}- Content → Padding → Border → Margin (andar se bahar)
- box-sizing: border-box = intuitive width calculation (modern default choice)
- Almost saari professional CSS globally border-box set karti hai
Do vertically-adjacent block elements ke margins "collapse" ho jaate hain (bade wala jeetta hai, dono add nahi hote) — ye ek famous CSS gotcha hai jo beginners ko confuse karta hai.
.box1 { margin-bottom: 30px; }
.box2 { margin-top: 20px; }
/* Beech ka gap 50px (30+20) NAHI hoga —
sirf 30px hoga (bada wala jeeta) — margin collapse */Margin negative bhi ho sakti hai — element ko apni normal position se "opposite" direction mein move karta hai, ya overlap create karta hai. Advanced technique, sparingly use hoti hai.
.overlap {
margin-top: -20px; /* element upar wale element ke UPAR overlap karega */
}