बॉक्स-साइजिंग - सीएसएस-ट्रिक्स

box-sizingसीएसएस में संपत्ति को नियंत्रित करता है कैसे बॉक्स मॉडल तत्व यह लागू होता है के लिए नियंत्रित किया जाता है।

.module ( box-sizing: border-box; )

इसका उपयोग करने के अधिक सामान्य तरीकों में से एक इसे पृष्ठ के सभी तत्वों पर लागू करना है, इसमें छद्म तत्व शामिल हैं:

*, *::before, *::after ( box-sizing: border-box; )

इसे अक्सर "सार्वभौमिक बॉक्स-आकार" कहा जाता है, और यह काम करने का एक अच्छा तरीका है! widthआपके द्वारा निर्धारित (शाब्दिक) वह चौड़ाई है जो आपको मिलती है, मानसिक गणित करने के लिए और कई गुणों से आने वाली चौड़ाई से आने वाली जटिलता का प्रबंधन करने के लिए। यहां तक ​​कि हमारे यहां बॉक्स-साइज़िंग जागरूकता दिवस भी है।

मूल्यों

• content-box: डिफ़ॉल्ट। चौड़ाई और ऊंचाई मान तत्व की सामग्री पर ही लागू होते हैं। पैडिंग और बॉर्डर बॉक्स के बाहर जोड़े जाते हैं।
• padding-box: चौड़ाई और ऊंचाई मान तत्व की सामग्री और इसके गद्दी पर लागू होते हैं। बॉर्डर बॉक्स के बाहर से जोड़ा गया है। वर्तमान में, केवल फ़ायरफ़ॉक्स padding-boxमूल्य का समर्थन करता है ।
• border-box: चौड़ाई और ऊंचाई मान सामग्री, गद्दी और सीमा पर लागू होते हैं।
• inherit: मूल तत्व के आकार का बॉक्स विरासत में मिला है।

उदाहरण

यह उदाहरण चित्र डिफ़ॉल्ट content-box(शीर्ष) से border-box(नीचे) की तुलना करता है :

छवियों के बीच की लाल रेखा तत्वों की चौड़ाई मान का प्रतिनिधित्व करती है। ध्यान दें कि box-sizing: content-box;पैडिंग और बॉर्डर सामग्री बॉक्स के बाहर जोड़े जाने पर डिफ़ॉल्ट के साथ तत्व घोषित चौड़ाई से अधिक हो जाता है, जबकि box-sizing: border-box;लागू चौड़ाई वाला तत्व पूरी तरह से घोषित चौड़ाई के भीतर फिट बैठता है।

बॉक्स साइजिंग का उपयोग करना

मान लीजिए कि आपने एक तत्व सेट किया है width: 100px; padding: 20px; border: 5px solid black;। डिफ़ॉल्ट रूप से, परिणामी बॉक्स 150px चौड़ा है। ऐसा इसलिए है क्योंकि डिफ़ॉल्ट बॉक्स साइज़िंग मॉडल है content-box, जो किसी तत्व की घोषित चौड़ाई को केवल उसकी सामग्री पर लागू करता है , तत्व के बॉक्स के बाहर पैडिंग और बॉर्डर रखता है। यह प्रभावी रूप से बढ़ता है कि तत्व कितना स्थान लेता है।

आप को बदलते हैं box-sizingकरने के लिए padding-box, गद्दी तत्व के बॉक्स के अंदर धकेल दिया जाता है। फिर, बॉक्स 110px चौड़ा होगा, जिसमें 20px अंदर की तरफ और 10px सीमा बाहर की तरफ होगी। यदि आप बॉक्स के अंदर पैडिंग और बॉर्डर रखना चाहते हैं, तो आप उपयोग कर सकते हैं border-box। तब बॉक्स 100px चौड़ा होगा - 10px सीमा और 20px गद्दी दोनों तत्व के बॉक्स के अंदर धकेल दिए जाते हैं।

डेमो

CodePen पर CSS-Tricks (@ css-tricks) द्वारा बॉक्स-साइज़िंग मानों की पेन तुलना देखें।

सम्बंधित

• width
• height
• padding
• border

ब्राउज़र का समर्थन

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	अर्थात	एंड्रॉयड	आईओएस
कोई *†	3 * †	1 ‡	7 *	8 *	२.१ * †	कोई *

* padding-boxसमर्थित नहीं है

-webkitSafari पुराने संस्करणों के लिए उपसर्ग की आवश्यकता होती है (Chrome 1-9, Safari 3-5, Android 2.1-3.x)

‡ -mozउपसर्ग 29 के रूप में बिना उपसर्ग वाले संस्करण 28 अप करने के लिए आवश्यक है,।