जावास्क्रिप्ट के लिए सीएसएस में एलिमेंट्स का विस्तार

सीएसएस गुणों width और height को सेट करना इस बात की गारंटी नहीं देता कि एलिमेंट निर्धारित आकार का हो जाएगा। आइए उदाहरणों पर नजर डालें।

उदाहरण

अभी एलिमेंट के आकार दिए गए आकारों से मेल खाते हैं:

html<div id="elem">
  text
</div>

css#elem {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
}

Результат:

उदाहरण

और अब एलिमेंट को padding गुण सेट करते हैं। परिणामस्वरूप, एलिमेंट की वास्तविक चौड़ाई अधिक हो जाएगी और आंतरिक पैडिंग के दिए गए मान तक विस्तारित हो जाएगी:

html<div id="elem">
  text
</div>

css#elem {
  padding: 25px;
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
}

Результат:

उदाहरण

बॉर्डर की उपस्थिति भी एलिमेंट को विस्तारित करती है:

html<div id="elem">
  text
</div>

css#elem {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
  border: 20px solid #F0D7A1;
}

Результат:

उदाहरण

box-sizing गुण ऊपर वर्णित व्यवहार को बदलने की अनुमति देता है। ऐसा किया जा सकता है कि न तो पैडिंग और न ही बॉर्डर एलिमेंट को विस्तारित करे। इसके लिए इस गुण को border-box मान सेट करना होगा:

html<div id="elem">
  text
</div>

css#elem {
  box-sizing: border-box;
  padding: 20px;
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
  border: 20px solid #F0D7A1;
}

Результат:

वर्णित की महत्वपूर्णता

जावास्क्रिप्ट के दृष्टिकोण से वर्णित स्थिति बहुत सुविधाजनक नहीं है। आखिरकार, यह पता चलता है कि width गुण का मान पढ़कर हम बिल्कुल भी आश्वस्त नहीं हो सकते कि एलिमेंट की चौड़ाई बिल्कुल यही होगी।