CSS बॉक्स साइजिंग प्रॉपर्टी कैसे काम करती है

CSS box-sizing का उपयोग करना सीखें यह नियंत्रित करने के लिए कि ब्राउज़र आपके HTML तत्वों की चौड़ाई और ऊंचाई की गणना और प्रतिपादन कैसे करता है।

बॉक्स-साइज़िंग (सामग्री-बॉक्स बनाम बॉर्डर-बॉक्स)

CSS box-sizing संपत्ति के दो मूल्य हैं:

content-box (डिफ़ॉल्ट)
border-box

दोनों बॉक्स-साइज़िंग मान प्रभावित करते हैं कि ब्राउज़र HTML तत्वों के आकार की गणना और प्रतिपादन कैसे करता है, लेकिन केवल यही एक चीज है जो उनमें समान है।

सामग्री-बॉक्स

डिफ़ॉल्ट रूप से सभी HTML तत्व content-box . का उपयोग करते हैं मूल्य:

box-sizing: content-box;

इसका मतलब है कि यदि आपके पास निम्नलिखित शैलियों वाला कोई तत्व है:

div {
  width: 100px;
  height: 100px;
  padding: 16px;
  border: 1px solid;
}

फिर उस तत्व की चौड़ाई और ऊंचाई की गणना 134px के रूप में की जाती है, 100px नहीं जैसा कि आपने अपने CSS स्टाइलशीट में निर्दिष्ट किया है। परिणाम:

यदि आप अपने लिए आकार जांचना चाहते हैं, तो अपने ब्राउज़र को सक्षम करें तत्व निरीक्षक इस आदेश के साथ:

मैक:सीएमडी + शिफ्ट + सी
विंडोज़:Ctrl + Shift + C

फिर अपने माउस को उसके आकार को देखने के लिए ऊपर के तत्व पर ले जाएँ।

ऐसा इसलिए होता है क्योंकि content-box बॉर्डर के साथ चौड़ाई/ऊंचाई के मानों को जोड़ता है (1px प्रत्येक तरफ) और पैडिंग (16px प्रत्येक तरफ) मान, और तत्वों के आकार को उन मानों के योग पर प्रस्तुत करता है:

तत्व की चौड़ाई:1 + 16 + 100 + 16 + 1 =134 पिक्सेल।
तत्व की ऊंचाई:1 + 16 + 100 + 16 + 1 =134 पिक्सेल।

content-box . से यह डिफ़ॉल्ट व्यवहार साथ काम करना काफी कष्टप्रद हो सकता है, लेकिन सौभाग्य से, इसे बदलना आसान है!

डिफ़ॉल्ट box-sizing: content-box घोषणा उपयोगकर्ता एजेंट स्टाइलशीट से विरासत में मिली है, जिसे सभी वेब ब्राउज़र में बनाया गया है।

बॉर्डर-बॉक्स से बचाव के लिए

आप आसानी से content-box को ओवरराइड कर सकते हैं border-box के साथ मान मान, जिसका ब्राउज़र द्वारा तत्वों के आकार की गणना करने के तरीके पर विपरीत प्रभाव पड़ता है:

box-sizing: border-box;

अपना box-sizing . सेट करके border-box . के लिए संपत्ति ब्राउज़र आपके तत्वों को सटीक चौड़ाई और ऊंचाई पर प्रस्तुत करेगा जो आप तत्व पर height के साथ निर्दिष्ट करते हैं और width गुण:

div {
  width: 100px;
  height: 100px;
  padding: 16px;
  border: 1px solid;
  box-sizing: border-box; 
}

परिणाम:

border-box मान ब्राउज़र को शामिल . बनाता है (जोड़ें नहीं) निर्दिष्ट पैडिंग और सीमा मान जब यह तत्व की कुल चौड़ाई और ऊंचाई की गणना करता है।

border-box के साथ , कोई फर्क नहीं पड़ता जो padding या border मान आप अपने तत्व में जोड़ते हैं, तो तत्व का कुल आकार वह मान होगा जो आप height पर निर्दिष्ट करते हैं और width गुण।

अच्छे उपाय के लिए यहाँ एक साथ तुलना है:

उपरोक्त दोनों तत्वों की निर्दिष्ट चौड़ाई और ऊंचाई 100 पिक्सेल है, लेकिन केवल दूसरा तत्व उन निर्दिष्ट मानों का सम्मान करता है क्योंकि यह border-box का उपयोग करता है ।

content-box बनाम border-box संक्षेप में:

content-box तत्वों की ऊंचाई/चौड़ाई वाले मानों के साथ पैडिंग और बॉर्डर मानों को जोड़ती है और कुल का प्रतिपादन करती है।
border-box तत्व की चौड़ाई/ऊंचाई के हिस्से के रूप में पैडिंग और सीमा मान शामिल हैं।

बॉर्डर-बॉक्स का उपयोग हर चीज़ पर करें

अब आप जानते हैं कि border-box ब्राउज़र को HTML तत्वों को वास्तविक आकार में प्रस्तुत करता है जिसे आप अपने सीएसएस में निर्दिष्ट करते हैं। लेकिन आप कैसे लागू करते हैं border-box आपके सभी HTML तत्वों पर?

यह निम्न सीएसएस नियम-सेट को सबसे ऊपर पर जोड़ने जितना आसान है आपकी स्टाइलशीट का:

*, *:before, *:after {
  box-sizing: border-box;
}

उपरोक्त कोड CSS के सार्वभौमिक चयनकर्ता का उपयोग करता है * border-box लागू करने के लिए box-sizing . का मान संपत्ति पर:

सभी सामान्य तत्व चयनकर्ता (div , p , button , आदि)
सभी :before और :after छद्म चयनकर्ता

border-box . का उपयोग करके आपके सभी HTML तत्वों पर, अब आपको इस बारे में चिंता करने की ज़रूरत नहीं है कि आपका ब्राउज़र आपके तत्वों के आकार को कैसे प्रस्तुत करता है। यह हमेशा ऊंचाई और चौड़ाई होगी जिसे आप स्वयं निर्दिष्ट करते हैं।