स्टाइल boxSizing गुण
- पिछला पृष्ठ boxShadow
- अगला पृष्ठ captionSide
- एक स्तर ऊपर एचटीएमएल डॉम स्टाइल ऑब्जैक्ट
परिभाषा और उपयोग
boxSizing गुण आपको विशिष्ट क्षेत्र के विशिष्ट एलेमेंट को विशिष्ट तरीके से परिभाषित करने की अनुमति देता है।
उदाहरण में, अगर आप दो बॉर्डर वाले बॉक्स को बराबर स्थानांतरित करना चाहते हैं, तो box-sizing को "border-box" में सेट करें। इससे ब्राउज़र निर्धारित चौड़ाई और ऊंचाई वाले बॉक्स दिखाएगा और बॉर्डर और आंतरिक पैडिंग बॉक्स में रखे जाएंगे।
और देखें:
CSS संदर्भ निर्देशिका:box-sizing गुण
उदाहरण
boxSizing गुण बदलना:
document.getElementById("myDIV").style.boxSizing = "border-box";
व्याकरण
boxSizing गुण वापस करना:
ऑब्जेक्ट.style.boxSizing
boxSizing गुण सेट करना:
ऑब्जेक्ट.style.boxSizing = "content-box|border-box|initial|inherit"
गुण मान
| मान | वर्णन |
|---|---|
| content-box |
मूलभूत मान। यह CSS2.1 में निर्धारित चौड़ाई और ऊंचाई के व्यवहार को वर्णित करता है। निर्धारित चौड़ाई और ऊंचाई (और min/max गुण) क्रमश: एलेमेंट के कंटेंट बॉक्स के चौड़ाई और ऊंचाई पर लागू किए जाते हैं। एलेमेंट की आंतरिक पैडिंग और बॉर्डर निर्धारित चौड़ाई और ऊंचाई से बाहर रूपांकित किए जाते हैं |
| border-box |
एलेमेंट के लिए निर्दिष्ट की गई चौड़ाई और ऊंचाई एलेमेंट के बॉर्डर बॉक्स को निर्धारित करती हैं। अर्थात, एलेमेंट के लिए निर्दिष्ट किए गए किसी भी आंतरिक पैडिंग और बॉर्डर को वर्तमान चौड़ाई और ऊंचाई के भीतर ड्राइंग किया जाता है। सामग्री की चौड़ाई और ऊंचाई प्राप्त करने के लिए बॉर्डर और आंतरिक पैडिंग से वर्तमान चौड़ाई और ऊंचाई से घटाया जाता है। |
| initial | इस गुण को उसके मूलभूत मान पर नियत करें। देखें: initial। |
| inherit | इस गुण को उसके पिता एलेमेंट से विरासत करें। देखें: inherit। |
तकनीकी विवरण
| मूलभूत मान: | content-box |
|---|---|
| परिणाम वापस करना: | बाइनरी फ़ाइल box-sizing गुण। |
| CSS संस्करण: | CSS3 |
ब्राउज़र सापोर्ट
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| सापोर्ट | सापोर्ट | सापोर्ट | सापोर्ट | सापोर्ट |
- पिछला पृष्ठ boxShadow
- अगला पृष्ठ captionSide
- एक स्तर ऊपर एचटीएमएल डॉम स्टाइल ऑब्जैक्ट
