बॉक्स-साइज़िंग गुण

box-sizing गुण तत्व के आयामों की गणना के तरीके को बदलने की अनुमति देता है।

डिफ़ॉल्ट रूप से padding जोड़ना तत्व को विस्तारित करता है: यदि हमने चौड़ाई width 100px और padding-left 20px में निर्धारित की है, तो तत्व की वास्तविक चौड़ाई 120px होगी।

और यदि हम border-left 10px में भी निर्धारित करते हैं, तो तत्व की वास्तविक चौड़ाई 130px हो जाएगी। यानी padding और border ब्लॉक को विस्तारित करते हैं (चौड़ाई और ऊंचाई दोनों में)। इस व्यवहार को box-sizing की सहायता से बदला जा सकता है।

सिंटैक्स

cssसेलेक्टर {
  box-sizing: content-box | border-box;
}

मान

डिफ़ॉल्ट मान: content-box।

उदाहरण . मानक व्यवहार

अभी दोनों ब्लॉकों की ऊंचाई और चौड़ाई समान है, हालांकि दूसरे ब्लॉक में padding निर्धारित है, और पहले में - नहीं। देखें, उनके आयाम कितने भिन्न हैं:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  margin-bottom: 10px;
  background: #f1f1f1;
}
#elem2 {
  padding: 50px;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

उदाहरण . मानक व्यवहार

अभी दोनों ब्लॉकों की ऊंचाई और चौड़ाई समान है, हालांकि दूसरे ब्लॉक में 10px की सीमा निर्धारित है, और पहले में - नहीं। देखें, उनके आयाम कितने भिन्न हैं:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  border: 10px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

उदाहरण . मानक व्यवहार

अभी दूसरे ब्लॉक में padding और 10px की सीमा दोनों हैं:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  padding: 50px;
  border: 20px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

उदाहरण . border-box मान

दूसरे तत्व में box-sizing गुण के लिए border-box मान जोड़ते हैं। अब पहले और दूसरे दोनों तत्वों के आयाम समान हो जाएंगे:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  box-sizing: border-box;
  padding: 50px;
  border: 10px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

यह भी देखें