CSS box-sizing प्रॉपर्टी का उपयोग करके यह नियंत्रित करना सीखें कि ब्राउज़र आपके HTML एलिमेंट्स की चौड़ाई और ऊंचाई की गणना और रेंडर कैसे करता है।
box-sizing (content-box बनाम border-box)
CSS box-sizing प्रॉपर्टी के दो मान हैं:
content-box(डिफ़ॉल्ट)border-box
दोनों box-sizing मान प्रभावित करते हैं कि ब्राउज़र HTML एलिमेंट्स के आकार की गणना और रेंडर कैसे करता है, लेकिन यह केवल एक चीज है जो उनमें समान है।
content-box
डिफ़ॉल्ट रूप से सभी HTML एलिमेंट्स content-box मान का उपयोग करते हैं:
box-sizing: content-box;इसका मतलब है कि यदि आपके पास निम्नलिखित स्टाइल्स वाला एक एलिमेंट है:
div { width: 100px; height: 100px; padding: 16px; border: 1px solid; }तो उस एलिमेंट की चौड़ाई और ऊंचाई की गणना 134px के रूप में की जाती है, 100px नहीं जैसा कि आपने अपनी CSS स्टाइलशीट में निर्दिष्ट किया था। परिणाम:
यदि आप स्वयं आकार की जांच करना चाहते हैं, तो इस कमांड के साथ अपने ब्राउज़र का एलिमेंट इंस्पेक्टर सक्षम करें:
- मैक: Cmd + Shift + C
- विंडोज: 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 घोषणा यूजर एजेंट स्टाइलशीट से इनहेरिट की जाती है, जो सभी वेब ब्राउज़र्स में बिल्ट-इन होती है।
border-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 के साथ, चाहे आप अपने एलिमेंट पर कोई भी पैडिंग या बॉर्डर वैल्यू जोड़ें, एलिमेंट का कुल आकार वही होगा जो आप height और width प्रॉपर्टीज पर निर्दिष्ट करते हैं।
अच्छे उपाय के लिए यहाँ साइड-बाय-साइड तुलना है:
ऊपर दोनों एलिमेंट्स की निर्दिष्ट चौड़ाई और ऊंचाई 100 पिक्सेल है, लेकिन केवल दूसरा एलिमेंट उन निर्दिष्ट मानों का सम्मान करता है क्योंकि यह border-box का उपयोग करता है।
content-box बनाम border-box संक्षेप में:
content-boxपैडिंग और बॉर्डर वैल्यूज को एलिमेंट्स की ऊंचाई/चौड़ाई वैल्यूज के साथ जोड़ता है और कुल रेंडर करता है।border-boxपैडिंग और बॉर्डर वैल्यूज को एलिमेंट की चौड़ाई/ऊंचाई के हिस्से के रूप में शामिल करता है।
सब कुछ पर border-box उपयोग करें
अब आप जानते हैं कि border-box ब्राउज़र्स को HTML एलिमेंट्स को उस वास्तविक आकार पर रेंडर करता है जो आप अपनी CSS में निर्दिष्ट करते हैं। लेकिन आप अपने सभी HTML एलिमेंट्स पर border-box कैसे लागू करते हैं?
यह उतना ही सरल है जितना अपने स्टाइलशीट के बहुत शीर्ष पर निम्नलिखित CSS नियम-सेट जोड़ना:
*, *:before, *:after { box-sizing: border-box; }उपरोक्त कोड CSS के यूनिवर्सल सेलेक्टर * का उपयोग box-sizing प्रॉपर्टी पर border-box वैल्यू लागू करने के लिए करता है:
- सभी सामान्य एलिमेंट सेलेक्टर्स (
div,p,button, आदि) - सभी
:beforeऔर:afterस्यूडो सेलेक्टर्स
border-box को अपने सभी HTML एलिमेंट्स पर उपयोग करके, आपको अब इस बारे में चिंता करने की ज़रूरत नहीं है कि आपका ब्राउज़र आपके एलिमेंट्स के आकार को कैसे रेंडर करता है। यह हमेशा वह ऊंचाई और चौड़ाई होगी जो आप स्वयं निर्दिष्ट करते हैं।
