CSS Tutorial - Box Model - Spacing
📦 Box Model - Spacing Control
🌟 Photo Frame Analogy:
🖼️ Content = Photo
⬜ Padding = Mat board (andar ki space)
🔲 Border = Frame
📏 Margin = Wall space (bahar ki space)
🎯 Box Model Parts
| Part | Kya Hai |
|---|---|
| Content | Actual text/image |
| Padding | Content ke around space (inside) |
| Border | Box ki boundary |
| Margin | Box ke bahar space (outside) |
💡 Shorthand:
padding: 10px; /* All sides */
padding: 10px 20px; /* Top/Bottom Left/Right */
padding: 10px 20px 15px 25px; /* T R B L (clockwise) */Example
div {
padding: 20px;
margin: 10px;
border: 2px solid black;
}