CSS बॉक्स साइजिंग

CSS बॉक्स साइजिंग

CSS box-sizing प्रतियोगिता अनुमति देती है कि हम एलीमेंट के कुल चौड़ाई और ऊंचाई में आंतरिक पैडिंग (फ़िलिंग) और किनारा समेत शामिल करें।

यदि CSS box-sizing एलीमेंट निर्दिष्ट नहीं किया गया

डिफ़ॉल्ट में, एलीमेंट की चौड़ाई और ऊंचाई एसे गिनी जाती है:

  • width + padding + border = एलीमेंट की वास्तविक चौड़ाई
  • height + padding + border = एलीमेंट की वास्तविक ऊंचाई

इसका मतलब है: जब आप एलीमेंट की चौड़ाई/ऊंचाई निर्दिष्ट करते हैं, तो एलीमेंट आमतौर पर आपके निर्दिष्ट चौड़ाई/ऊंचाई से बड़ा दिखता है (क्योंकि एलीमेंट के किनारा और आंतरिक पैडिंग एलीमेंट के निर्दिष्ट चौड़ाई/ऊंचाई में जोड़े गए हैं)。

नीचे दिए गए चित्र में एक-सी निर्दिष्ट चौड़ाई और ऊंचाई वाले दोनों <div> एलीमेंट दिखाए गए हैं:

यह div छोटा है
（चौड़ाई 300px है, ऊंचाई 100px है）。
यह div अधिक बड़ा है
（चौड़ाई भी 300px है, ऊंचाई 100px है）。

ऊपरी दोनों <div> एलीमेंट अंतिम परिणाम में भिन्न आकार दिखाते हैं (क्योंकि div2 में पैडिंग निर्दिष्ट किया गया है):

इंस्टेंस

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue; 
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

अपने आप सामने लाइट करें

box-sizing प्रतियोगिता समस्या को हल करती है。

यदि हम CSS box-sizing एलीमेंट का इस्तेमाल करते हैं

box-sizing प्रतियोगिता अनुमति देती है कि हम एलीमेंट के कुल चौड़ाई और ऊंचाई में आंतरिक पैडिंग और किनारा समेत शामिल करें।

यदि एलीमेंट पर box-sizing: border-box;तो चौड़ाई और ऊंचाई आंतरिक पैडिंग और किनारा सहित होगा:

अब दोनों div का आकार एक-सी है!
Hooray!

इस प्रदर्शन और ऊपरी प्रदर्शन के समान है, दोनों <div> एलीमेंटों को box-sizing: border-box;：

इंस्टेंस

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

अपने आप सामने लाइट करें

क्योंकि इस्तेमाल करने के कारण box-sizing: border-box; इस तरीके के प्रभाव इतना अच्छा दिखाया है कि कई डेवलपर्स चाहते हैं कि साइट पर सभी एलिमेंट इस तरीके से काम करें।

नीचे का कोड इस तरीके से सभी एलिमेंट के आकार को समान तरीके से समायोजित करने की सुनिश्चित करता है।अनेक ब्राउज़रों ने अनेक फॉर्म एलिमेंट पर box-sizing: border-box;（लेकिन सभी नहीं - यही कारण है कि input और textarea width: 100%; पर अलग दिखते हैं）。

सभी एलिमेंट पर इस्तेमाल करना सुरक्षित और बुद्धिमानीपूर्ण है:

इंस्टेंस

* {
  box-sizing: border-box;
}

अपने आप सामने लाइट करें

CSS बॉक्स साइजिंग अट्रिब्यूट

अट्रिब्यूट वर्णन
box-sizing एलिमेंट की चौड़ाई और ऊंचाई की गणना के तरीके को निर्धारित करता है: वे आंतरिक इंडेंट (padding) और बॉर्डर को समाविष्ट करें या नहीं।