CSS Box Sizing

एक picture frame खरीदने की कल्पना करें। आप चाहते हैं कि frame आपकी wall पर एक specific 10-inch wide जगह में fit हो। Standard box model (content-box) में, manufacturer एक 10-inch glass pane बनाता है, फिर उसके चारों ओर 2 inches का wooden frame जोड़ता है, कुल size को 14 inches बनाते हुए। यह overflow हो जाता है और आपकी wall पर fit होने में fail हो जाता है। अब, border-box model इस्तेमाल करके बनाए गए एक frame को खरीदने की कल्पना करें। Manufacturer 10-inch size constraint लेता है और उस size में exactly fit होने के लिए outer frame बनाता है, अंदर के glass pane को अंदर fit होने के लिए shrink करते हुए। CSS box-sizing: border-box ठीक यही करता है। यह borders और padding को आपकी width के अंदर बैठने पर मजबूर करता है, elements को overflow होने से रोकते हुए।

In this page:

content-box को समझना (Default)
border-box को समझना
border-box क्यों Preferred है
Global Box Reset
Custom Grid Cards को Size करना

Syntax

css

selector {
  box-sizing: content-box | border-box;
}

content-box को समझना (Default)

Default रूप से, browsers content-box model इस्तेमाल करके element widths calculate करते हैं। इसका मतलब है कि आप जो भी padding या borders जोड़ते हैं वे width के बाहर जुड़ते हैं, element को specified से physically wider बनाते हुए।

Note:

padding वाले layouts के लिए content-box इस्तेमाल करने से बचें, क्योंकि यह element dimensions को overflow करा सकता है।
Accepted values:
content-box — width और height सिर्फ content पर लागू होती हैं (initial value)
border-box — width और height में padding और border शामिल होते हैं
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: default box model को नज़रअंदाज़ करना sibling elements को एक-दूसरे को नीचे धकेलने और आपके page columns तोड़ने का कारण बन सकता है।

उदाहरण: Understanding content-box (Default)

css

<style>
.box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}
</style>
<div class="box">Renders wider than 200px: padding and border add on top</div>

border-box को समझना

border-box model borders और padding को आपकी specified width के अंदर बैठने पर मजबूर करता है, content area को fit होने के लिए shrink करते हुए। यह element sizes calculate करना और साफ़ layouts बनाना कहीं ज़्यादा आसान बनाता है।

Note:

अपने element widths को predictable और layout calculations को simple रखने के लिए border-box इस्तेमाल करें।
Accepted values:
content-box — width और height सिर्फ content पर लागू होती हैं (initial value)
border-box — width और height में padding और border शामिल होते हैं
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: अगर आपकी padding और borders specified width से बड़े हैं, तो अंदर का content overflow हो जाएगा।

उदाहरण: Understanding border-box

css

<style>
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}
</style>
<div class="box">Stays exactly 200px: padding and border included</div>

border-box क्यों Preferred है

responsive grid layouts बनाते समय, columns आमतौर पर percentage widths में defined होते हैं (जैसे दो 50% columns)।

अगर आप default content-box model के तहत इन columns में padding या borders जोड़ते हैं, तो वे 100% से overflow होकर टूट जाएँगे। border-box model आपके column widths को exact और predictable रखकर इसे solve करता है।

Note: layout breaks के बिना आसानी से fluid, responsive multi-column layouts बनाने के लिए border-box इस्तेमाल करें।

Warning: एक ही page पर content-box और border-box columns को mix करना layout alignment errors पैदा कर सकता है।

उदाहरण: Why border-box is Preferred

css

<style>
.col {
  box-sizing: border-box;
  width: 50%;
  padding: 10px;
  background: lightblue;
  border: 1px solid #666;
  float: left;
}
</style>
<div class="col">50%</div>
<div class="col">50% — stays exact, doesn't overflow 100%</div>

Global Box Reset

अपनी stylesheets में हर एक class selector पर box-sizing: border-box लिखने से बचने के लिए, आप global reset selector (*) को pseudo-elements के साथ combine करके अपने page के सभी elements पर automatically border-box लागू कर सकते हैं।

Note: इस global reset rule को अपनी सभी stylesheets के बिल्कुल top पर शामिल करें।

Warning: कुछ third-party widget scripts default content-box sizing पर निर्भर कर सकती हैं, इसलिए integrations को सावधानी से test करें।

उदाहरण: The Global Box Reset

css

<style>
*, *::before, *::after {
  box-sizing: border-box;
}
</style>
<div style="width:200px; padding:20px; border:4px solid teal; background:#e0f2f1">border-box keeps this at 200px wide.</div>

Custom Grid Cards को Size करना

border-box इस्तेमाल करना तब ज़रूरी है जब आप borders और padding वाले complex card grids बना रहे हों, अपने columns को perfectly aligned रखते हुए और layout shifts रोकते हुए।

Note: predictable, responsive grids बनाने के लिए border-box को modern Flexbox layouts के साथ जोड़ें।

Warning: सुनिश्चित करें कि styled cards के अंदर आपकी image files में hard-coded widths नहीं हैं जो responsive box limits को override कर सकें।

उदाहरण: Sizing Custom Grid Cards

css

<style>
.card {
  box-sizing: border-box;
  width: 33.33%;
  padding: 16px;
  border: 1px solid #ddd;
  float: left;
}
</style>
<div class="card">Card</div>
<div class="card">Card</div>
<div class="card">Card</div>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS !important Next Lesson → CSS Media Queries