सीएसएस बॉक्स मॉडल

वेब विकास में, CSS बॉक्स मॉडल से तात्पर्य है कि HTML तत्वों को ब्राउज़र इंजनों में कैसे मॉडल किया जाता है और उन HTML तत्वों के आयाम CSS गुणों से कैसे प्राप्त होते हैं। यह HTML वेबपेजों की रचना के लिए एक मौलिक अवधारणा है। बॉक्स मॉडल के दिशानिर्देशों का वर्णन वेब मानकों  विश्वव्यापी वेब संकाय  | वर्ल्ड वाइड वेब कंसोर्टियम (W3C) विशेष रूप से CSS वर्किंग ग्रुप द्वारा किया गया है। 1990 के दशक के अंत और 2000 के दशक के प्रारंभ में मुख्यधारा के ब्राउज़रों में बॉक्स मॉडल के गैर-मानक अनुरूप कार्यान्वयन हुए थे। 1998 में CSS#CSS_2 के आगमन के साथ, जिसने   संपत्ति, समस्या ज्यादातर हल हो गई थी।

विशिष्टता
कैस्केडिंग स्टाइल शीट्स (सीएसएस) विनिर्देश बताता है कि ग्राफिकल ब्राउज़रों द्वारा वेब पृष्ठ ों के तत्वों को कैसे प्रदर्शित किया जाता है। CSS1 विनिर्देश का खंड 4 एक स्वरूपण मॉडल को परिभाषित करता है जो ब्लॉक-स्तरीय तत्व देता है - जैसे   और  —एक चौड़ाई और ऊंचाई, और इसके आसपास के तीन स्तर के बॉक्स: पैडिंग, बॉर्डर और मार्जिन। जबकि विनिर्देश शब्द बॉक्स मॉडल का स्पष्ट रूप से उपयोग नहीं करता है, यह शब्द वेब डेवलपर्स और वेब ब्राउज़र विक्रेताओं द्वारा व्यापक रूप से उपयोग किया जाता है।

सभी HTML तत्वों को बॉक्स माना जा सकता है, इसमें शामिल हैं  उपनाम,   टैग, या   उपनाम। इनमें से प्रत्येक बॉक्स में पाँच परिवर्तनीय आयाम हैं:


 * द  और   बॉक्स की वास्तविक सामग्री के आयामों का वर्णन करें (पाठ, चित्र, ...)
 * द  इस सामग्री और बॉक्स की सीमा के बीच की जगह का वर्णन करता है
 * द  बॉक्स के चारों ओर किसी भी प्रकार की रेखा (ठोस, बिंदीदार, धराशायी ...) है, यदि मौजूद हो
 * द  सीमा के आसपास का स्थान है

1996 में W3C द्वारा जारी और 1999 में संशोधित CSS1 विनिर्देश के अनुसार, जब किसी ब्लॉक-स्तरीय तत्व के लिए चौड़ाई या ऊंचाई स्पष्ट रूप से निर्दिष्ट की जाती है, तो इसे केवल दृश्य तत्व की चौड़ाई या ऊंचाई निर्धारित करनी चाहिए, जिसमें पैडिंग, बॉर्डर, और बाद में लागू मार्जिन। CSS3 से पहले, इस बॉक्स मॉडल को W3C बॉक्स मॉडल के रूप में जाना जाता था, CSS3 में इसे.

एक बॉक्स की कुल चौड़ाई इसलिए है  +   +   +   +   +   +. इसी प्रकार, एक बॉक्स की कुल ऊंचाई बराबर होती है  +   +   +   +   +   +.

उदाहरण के लिए, निम्नलिखित सीएसएस कोड 'myClass' से संबंधित प्रत्येक ब्लॉक के बॉक्स आयाम निर्दिष्ट करेगा। इसके अलावा, ऐसे प्रत्येक बॉक्स की कुल ऊंचाई 160 पिक्सेल और चौड़ाई 260 पिक्सेल होगी।

CSS3 ने इंटरनेट एक्सप्लोरर बॉक्स मॉडल को मानक के रूप में पेश किया, जिसे कहा जाता है.

इतिहास
HTML 4 और CSS से पहले, बहुत कम HTML तत्व बॉर्डर और पैडिंग दोनों का समर्थन करते थे, इसलिए किसी तत्व की चौड़ाई और ऊंचाई की परिभाषा बहुत विवादास्पद नहीं थी। हालाँकि, यह तत्व के आधार पर भिन्न होता है। किसी तालिका की HTML चौड़ाई विशेषता उसकी सीमा सहित तालिका की चौड़ाई को परिभाषित करती है। दूसरी ओर, छवि की HTML चौड़ाई विशेषता छवि की चौड़ाई को परिभाषित करती है (किसी भी सीमा के भीतर)। उन शुरुआती दिनों में पैडिंग का समर्थन करने वाला एकमात्र तत्व टेबल सेल था। सेल के लिए चौड़ाई को सेल पैडिंग को छोड़कर पिक्सेल में सेल सामग्री के लिए सुझाई गई चौड़ाई के रूप में परिभाषित किया गया था। 1996 में, सी.एस.एस कई और तत्वों के लिए मार्जिन, बॉर्डर और पैडिंग की शुरुआत की। इसने टेबल सेल के समान सामग्री, सीमा, मार्जिन और पैडिंग के संबंध में एक परिभाषा चौड़ाई को अपनाया। इसके बाद से इसे W3C बॉक्स मॉडल के रूप में जाना जाने लगा।

उस समय, बहुत कम ब्राउज़र विक्रेताओं ने अक्षर के लिए W3C बॉक्स मॉडल लागू किया था। उस समय के दो प्रमुख ब्राउज़र, नेटस्केप कम्युनिकेटर|नेटस्केप 4.0 और इंटरनेट एक्सप्लोरर 4|इंटरनेट एक्सप्लोरर 4.0 दोनों ने चौड़ाई और ऊंचाई को सीमा से सीमा तक की दूरी के रूप में परिभाषित किया। इसे पारंपरिक कहा गया है या इंटरनेट एक्सप्लोरर बॉक्स मॉडल। अजीब मोड में इंटरनेट एक्सप्लोरर में निर्दिष्ट चौड़ाई या ऊंचाई के भीतर सामग्री, पैडिंग और सीमाएं शामिल हैं; इसका परिणाम मानक व्यवहार का अनुसरण करने की तुलना में एक बॉक्स के संकीर्ण या छोटे प्रतिपादन में होता है। इंटरनेट एक्सप्लोरर बॉक्स मॉडल व्यवहार को अक्सर एक बग माना जाता था, क्योंकि जिस तरह से इंटरनेट एक्सप्लोरर के पुराने संस्करण बॉक्स मॉडल या वेब पेज में तत्वों के आकार को संभालते हैं, जो कि व्यापक शैली पत्रक लिए W3C द्वारा अनुशंसित मानक तरीके से अलग है। पत्रक भाषा। इंटरनेट एक्सप्लोरर 6 के अनुसार, ब्राउज़र एक वैकल्पिक रेंडरिंग मोड (जिसे मानक-अनुपालन मोड कहा जाता है) का समर्थन करता है जो इस विसंगति को हल करता है। हालांकि, पिछड़े संगतता कारणों के लिए, सभी संस्करण अभी भी डिफ़ॉल्ट रूप से सामान्य, गैर-मानक तरीके से व्यवहार करते हैं (क्विर्क्स मोड देखें)। मैक के लिए इंटरनेट एक्सप्लोरर इस अमानक व्यवहार से प्रभावित नहीं है।

समाधान
यदि पृष्ठ में कुछ HTML दस्तावेज़ प्रकार की घोषणाएँ हैं, तो Internet Explorer संस्करण Internet Explorer 6 और आगे बग से प्रभावित नहीं होते हैं। पश्चगामी संगतता के कारणों के लिए quirks मोड में होने पर ये संस्करण बग्गी व्यवहार को बनाए रखते हैं। उदाहरण के लिए, quirks मोड ट्रिगर किया गया है:

W3C बॉक्स मॉडल का उपयोग करके वेब पेजों को प्रदर्शित करने के लिए Internet Explorer संस्करण 5 और इससे पहले के संस्करण को बाध्य करने के लिए कई समाधान तैयार किए गए हैं। ब्राउज़र से कुछ नियमों को छिपाने के लिए ये वर्कअराउंड आमतौर पर Internet Explorer के CSS चयनकर्ता प्रसंस्करण में असंबंधित बग का शोषण करते हैं। इन वर्कअराउंड्स में सबसे अच्छी तरह से जाना जाने वाला बॉक्स मॉडल हैक टैंटेक सेलिक द्वारा विकसित किया गया है, जो माइक्रोसॉफ्ट के एक पूर्व कर्मचारी हैं, जिन्होंने मैकिंटोश के लिए इंटरनेट एक्सप्लोरर पर काम करते समय इस विचार को विकसित किया था। इसमें विंडोज़ के लिए इंटरनेट एक्सप्लोरर के लिए चौड़ाई घोषणा निर्दिष्ट करना शामिल है, और उसके बाद सीएसएस-अनुरूप ब्राउज़रों के लिए इसे किसी अन्य चौड़ाई घोषणा के साथ ओवरराइड करना शामिल है। यह दूसरी घोषणा विंडोज़ के लिए इंटरनेट एक्सप्लोरर से अन्य बगों का शोषण करके छिपी हुई है जिस तरह से यह सीएसएस नियमों को पार करती है। इन CSS हैक्स का कार्यान्वयन Internet Explorer 7 के सार्वजनिक रिलीज़ द्वारा और जटिल हो गया है, जिसमें कुछ समस्याओं को ठीक किया गया है, लेकिन अन्य को नहीं, जिससे इन हैक्स का उपयोग करने वाले पृष्ठों में अवांछित परिणाम उत्पन्न हुए हैं।
 * जब दस्तावेज़ प्रकार की घोषणा अनुपस्थित या अपूर्ण हो;
 * जब कोई HTML 3 या पहले का दस्तावेज़ मिलता है;
 * जब एक HTML 4.0 संक्रमणकालीन या फ़्रेमसेट दस्तावेज़ प्रकार की घोषणा का उपयोग किया जाता है और एक सिस्टम आइडेंटिफ़ायर (URI) मौजूद नहीं होता है;
 * जब एक एसजीएमएल टिप्पणी या अन्य अपरिचित सामग्री दस्तावेज़ प्रकार की घोषणा से पहले प्रकट होती है
 * यदि दस्तावेज़ प्रकार की घोषणा से पहले कोई XML घोषणा होती है, तो Internet Explorer 6 भी quirks मोड का उपयोग करता है।

बॉक्स मॉडल हैक अविश्वसनीय साबित हुए हैं क्योंकि वे ब्राउज़र के सीएसएस समर्थन में बग पर भरोसा करते हैं जिन्हें बाद के संस्करणों में ठीक किया जा सकता है। इस कारण से, कुछ वेब डेवलपर्स ने इसके बजाय इंटरनेट एक्सप्लोरर के पुराने संस्करणों में बॉक्स मॉडल बग के आसपास काम करने के लिए एक ही तत्व के लिए चौड़ाई और पैडिंग दोनों को निर्दिष्ट करने या सशर्त टिप्पणी और/या सीएसएस हैक्स का उपयोग करने से बचने की सिफारिश की है।

इंटरनेट एक्सप्लोरर के बॉक्स मॉडल
के लिए समर्थन वेब डिजाइनर डग बोमन ने कहा है कि मूल इंटरनेट एक्सप्लोरर बॉक्स मॉडल एक बेहतर, अधिक तार्किक दृष्टिकोण का प्रतिनिधित्व करता है। पीटर-पॉल कोच एक भौतिक बॉक्स का उदाहरण देते हैं, जिसका आयाम हमेशा संभावित पैडिंग सहित बॉक्स को ही संदर्भित करता है, लेकिन इसकी सामग्री को कभी नहीं। उनका कहना है कि यह बॉक्स मॉडल ग्राफिक डिजाइनरों के लिए अधिक उपयोगी है, जो अपनी सामग्री की चौड़ाई के बजाय बॉक्स की दृश्यमान चौड़ाई के आधार पर डिजाइन बनाते हैं। बर्नी ज़िम्मरमैन का कहना है कि इंटरनेट एक्सप्लोरर बॉक्स मॉडल HTML तालिका मॉडल में उपयोग किए जाने वाले सेल आयामों और पैडिंग की परिभाषा के करीब है। W3C ने CSS3 में एक बॉक्स-साइज़िंग गुण शामिल किया है। कब  एक तत्व के लिए निर्दिष्ट किया गया है, तत्व की कोई भी गद्दी या सीमा निर्दिष्ट चौड़ाई और ऊंचाई के अंदर खींची जाती है, जैसा कि आमतौर पर लीगेसी HTML उपयोगकर्ता एजेंटों द्वारा कार्यान्वित किया जाता है। Internet Explorer 8, WebKit ब्राउज़र जैसे कि Safari (वेब ​​ब्राउज़र) 5.1+ और Google Chrome, Gecko (लेआउट इंजन) | Gecko- आधारित ब्राउज़र जैसे Mozilla Firefox 29.0 और बाद में, Opera (वेब ​​ब्राउज़र) 7.0 और बाद का संस्करण, और Konqueror 3.3। 2 और बाद में CSS3 बॉक्स-साइज़िंग गुण का समर्थन करता है। 29.0 से पहले के गेको ब्राउज़र ब्राउज़र-विशिष्ट का उपयोग करके समान कार्यक्षमता का समर्थन करते हैं   संपत्ति।   बूटस्ट्रैप (फ्रंट-एंड फ्रेमवर्क) में उपयोग किया जाने वाला डिफ़ॉल्ट बॉक्स मॉडल है।

बाहरी संबंध

 * The world wide web consortium (W3C) specification of the box model
 * A tutorial on the CSS box model
 * Tantek Çelik's description of the "box model hack"
 * Getting Internet Explorer to Play Well with CSS - article on about.com that outlines various ways to get around box model problem and other IE bugs.
 * Cascading Style Sheet Compatibility in Internet Explorer 7 - MSDN article, July 2006.
 * CSS Box Model differences in Firefox and Internet Explorer - Further explanation of the rendering differences between Mozilla Firefox and Internet Explorer.