CSS
बॉक्स मॉडल

वाक्य - विन्यास

• बॉक्स-आकार: पैरामीटर ;

पैरामीटर

टिप्पणियों

बॉक्स मॉडल क्या है?

किनारे

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

CSS2.2 वर्किंग ड्राफ्ट से आरेख

चार क्षेत्रों में से प्रत्येक की परिधि को एक किनारे कहा जाता है । प्रत्येक किनारे एक बॉक्स को परिभाषित करता है ।

• अंतरतम आयत सामग्री बॉक्स है । इस की चौड़ाई और ऊंचाई तत्व की प्रदान की गई सामग्री (पाठ, चित्र और किसी भी बच्चे के तत्वों पर निर्भर हो सकती है) पर निर्भर करती है।
• अगला पैडिंग बॉक्स है , जैसा कि padding प्रॉपर्टी द्वारा परिभाषित किया गया है। यदि कोई padding चौड़ाई परिभाषित नहीं है, तो पैडिंग एज कंटेंट एज के बराबर है।
• फिर हमारे पास बॉर्डर बॉक्स है , जैसा कि border संपत्ति द्वारा परिभाषित किया गया है। यदि कोई border चौड़ाई परिभाषित नहीं है, तो सीमा किनारा पैडिंग एज के बराबर है।
• सबसे बाहरी आयत मार्जिन बॉक्स है , जैसा कि margin संपत्ति द्वारा परिभाषित किया गया है। यदि कोई margin चौड़ाई परिभाषित नहीं है, तो मार्जिन किनारा बॉर्डर एज के बराबर है।

उदाहरण

div {
    border: 5px solid red;
    margin: 50px;
    padding: 20px;
}

यह सीएसएस शैलियों सभी div तत्वों को चौड़ाई में 5px एक शीर्ष, दाईं, नीचे और बाईं ओर है; 50px का ऊपरी, दाएँ, नीचे और बाएँ मार्जिन; और एक शीर्ष, दाएं, नीचे, और बाईं ओर 20px पैडिंग। सामग्री पर ध्यान न देने पर, हमारा जेनरेट किया गया बॉक्स इस तरह दिखाई देगा:

Google Chrome के तत्व शैलियाँ पैनल का स्क्रीनशॉट

• जैसा कि कोई सामग्री नहीं है, सामग्री क्षेत्र (बीच में नीला बॉक्स) की कोई ऊंचाई या चौड़ाई (0px से 0px) नहीं है।
• डिफ़ॉल्ट रूप से पैडिंग बॉक्स कंटेंट बॉक्स के समान आकार का होता है, साथ ही हम उन चारों किनारों पर 20px की चौड़ाई को ऊपर रखते हैं, जो padding प्रॉपर्टी (40px से 40px) के साथ ऊपर परिभाषित कर रहे हैं।
• बॉर्डर बॉक्स पैडिंग बॉक्स के समान आकार का होता है, साथ ही हम जो 5px चौड़ाई border संपत्ति (50px बाय 50 पीएक्स) के साथ ऊपर परिभाषित कर रहे हैं।
• अंत में मार्जिन बॉक्स बॉर्डर बॉक्स के समान आकार का होता है, साथ ही हम जिस 50px चौड़ाई को margin प्रॉपर्टी के साथ परिभाषित कर रहे हैं (हमारे तत्व को 150px द्वारा कुल आकार 150x) दे रहे हैं।

अब हमारे तत्व को उसी शैली के साथ एक भाई देता है। ब्राउज़र दोनों तत्वों के बॉक्स मॉडल को देखने के लिए काम करता है जहां पिछले तत्व की सामग्री के संबंध में नया तत्व तैनात किया जाना चाहिए:

प्रत्येक तत्व की सामग्री को 150px अंतर से अलग किया जाता है, लेकिन दो तत्वों के बक्से एक दूसरे को छूते हैं।

अगर हम अपने पहले तत्व को संशोधित करते हैं कि कोई सही मार्जिन न हो, तो सही मार्जिन एज सही बॉर्डर एज के समान स्थिति में होगा, और हमारे दो तत्व अब इस तरह दिखेंगे:

बॉक्स आकार

डिफ़ॉल्ट बॉक्स मॉडल ( content-box ) काउंटर-सहज ज्ञान युक्त हो सकता है, क्योंकि किसी तत्व के लिए width / height स्क्रीन पर उसकी वास्तविक चौड़ाई या ऊँचाई का प्रतिनिधित्व नहीं करेगी, जैसे ही आप तत्व में padding और border स्टाइल जोड़ना शुरू करते हैं।

निम्न उदाहरण content-box साथ इस संभावित मुद्दे को प्रदर्शित करता है:

textarea {
    width: 100%;
    padding: 3px;
    box-sizing: content-box; /* default value */
}

चूंकि पैडिंग को टेक्सारिया की चौड़ाई में जोड़ा जाएगा, जिसके परिणामस्वरूप तत्व एक टेक्सारिया है जो 100% से अधिक व्यापक है।

सौभाग्य से, सीएसएस हमें एक तत्व के लिए box-sizing संपत्ति के साथ बॉक्स मॉडल को बदलने की अनुमति देता है। उपलब्ध संपत्ति के लिए तीन अलग-अलग मूल्य हैं:

• content-box : सामान्य बॉक्स मॉडल - चौड़ाई और ऊंचाई में केवल सामग्री शामिल होती है, न कि पैडिंग या बॉर्डर

• padding-box : चौड़ाई और ऊंचाई में सामग्री और गद्दी शामिल हैं, लेकिन सीमा नहीं

• border-box : चौड़ाई और ऊंचाई में सामग्री, पैडिंग के साथ-साथ सीमा भी शामिल है

ऊपर textarea समस्या को हल करने के लिए, आप बस box-sizing संपत्ति को padding-box या border-box । border-box का सबसे अधिक उपयोग किया जाता है।

textarea {
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}

पृष्ठ पर प्रत्येक तत्व के लिए एक विशिष्ट बॉक्स मॉडल लागू करने के लिए, निम्नलिखित स्निपेट का उपयोग करें:

html {
    box-sizing: border-box;
}

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

इस कोडिंग box-sizing:border-box; सीधे * लागू नहीं होता है, इसलिए आप इस संपत्ति को व्यक्तिगत तत्वों पर आसानी से लिख सकते हैं।