# बॉक्स मॉडल — सीएसएस

Source: https://www.geekswithgeeks.com/hi/css/css-box-model

> हर एलिमेंट एक आयताकार बॉक्स है: content, padding, border, margin।

## चार परतें

अंदर से बाहर: **content** (टेक्स्ट/इमेज), **padding** (बॉर्डर के अंदर जगह), **border** (किनारे की रेखा), **margin** (बाहर की जगह, बॉक्स के बीच)।

## फ्रेम की गई फोटो जैसा

content **फोटो** है, padding उसके चारों ओर का **मैट बोर्ड** है, border **फ्रेम** है, और margin अगली फ्रेम से पहले छोड़ी गई **दीवार की जगह** है।

## एक रूल में सभी चार

padding/margin/border-width के लिए शॉर्टहैंड क्रम: top, right, bottom, left।

```css
.box {
  width: 200px;
  padding: 16px;
  border: 2px solid #333;
  margin: 10px 20px;   /* top/bottom 10px, left/right 20px */
}
```

**Quiz:** अंदर से बाहर की ओर, सही क्रम क्या है?

- [ ] content → border → padding → margin
- [x] content → padding → border → margin
- [ ] margin → border → padding → content

*Answer:* content → padding → border → margin. padding content से सटा होता है, फिर border, फिर सबसे बाहर margin।