CSS Box Model
In this page:
selector {
width: length;
padding: length;
border: width style color;
margin: length;
}Box Model की चार Layers
हर element बीच में content, content के चारों ओर padding, padding के चारों ओर एक border, और सबसे बाहरी layer के रूप में margin से बना होता है। ये चारों layers मिलकर page पर किसी element का total footprint तय करती हैं।
- एक framed photo की कल्पना करें:
- photo content है
- उसके चारों ओर mat padding है
- frame खुद border है
- frame के आस-पास की wall space margin है।
उदाहरण: The Four Layers of the Box Model
<style>
.box {
padding: 20px;
border: 5px solid black;
margin: 20px;
background: lightyellow;
}
</style>
<div class="box">Content, padding, border, margin</div>Browsers Total Width कैसे Calculate करते हैं
Default रूप से, आपकी declare की गई width और height सिर्फ content box को describe करती हैं। Padding और border इसके ऊपर जुड़ते हैं, इसलिए किसी element का final rendered size अक्सर सिर्फ उसकी declared width से बड़ा होता है।
उदाहरण: How Browsers Calculate Total Width
<style>
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
background: lightyellow;
}
</style>
<div class="box">Renders wider than 200px: content + padding + border</div>box-sizing: content-box (default)
content-box, box-sizing की default value है। इसका मतलब है कि आपकी set की गई width और height सिर्फ content area पर लागू होती हैं, और उसके ऊपर padding और border जुड़ते हैं।
- आपको शायद ही कभी 'box-sizing: content-box' explicitly लिखने की ज़रूरत पड़े क्योंकि यह पहले से ही browser default है, यह ज़्यादातर एक comparison के तौर पर जानना उपयोगी है।
- Accepted values:
- content-box — width और height सिर्फ content पर लागू होती हैं (initial value)
- border-box — width और height में padding और border शामिल होते हैं
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: box-sizing: content-box (the default)
<style>
.box {
box-sizing: content-box;
width: 200px;
padding: 20px;
background: lightyellow;
border: 2px solid #cc9900;
}
</style>
<div class="box">200px is just the content area</div>box-sizing: border-box
box-sizing को border-box set करना declared width और height में padding और border को शामिल कर देता है, इसलिए element का final rendered size हमेशा उससे match करता है जो आपने असल में type किया था।
- कई developers किसी project की stylesheet में सबसे ऊपर एक बार '* { box-sizing: border-box; }' set कर देते हैं, ताकि हर element default रूप से predictably behave करे।
- Accepted values:
- content-box — width और height सिर्फ content पर लागू होती हैं (initial value)
- border-box — width और height में padding और border शामिल होते हैं
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: box-sizing: border-box
<style>
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
background: lightyellow;
border: 2px solid #cc9900;
}
</style>
<div class="box">200px now includes the padding</div>DevTools में Box Model को Visualize करना
हर modern browser का DevTools Elements या Inspector panel में एक visual box model diagram शामिल करता है, जो currently selected element पर content, padding, border, और margin की exact pixel values दिखाता है।
उदाहरण: Visualizing the Box Model in DevTools
<style>
.box {
width: 150px;
padding: 10px;
border: 2px solid black;
margin: 15px;
}
</style>
<div class="box">Open DevTools and inspect this box's model diagram</div>- यह भूल जाना कि padding और border default रूप से किसी element की total width में जुड़ते हैं, जिससे layouts उम्मीद से wider हो जाते हैं।
- globally box-sizing: border-box set न करना, जिससे किसी project में unpredictable width calculations होती हैं।
- spacing issues debug करते समय margin (border के बाहर) को padding (border के अंदर) के साथ confuse करना।
- हर HTML element चार layers से बना एक box है: content, padding, border, और margin।
- Default रूप से, padding और border किसी element की declared width और height में जुड़ते हैं।
- box-sizing: border-box इसे बदल देता है, इसके बजाय padding और border को declared width के अंदर शामिल करता है।
CSS box model और box-sizing property हर modern browser में supported हैं।
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: