बॉक्स मॉडल

सीएसएस पॉडकास्ट - 001: बॉक्स मॉडल

मान लें कि आपके पास एचटीएमएल का यह हिस्सा है:

<p>I am a paragraph of text that has a few words in it.</p>

इसके लिए, आपने यह सीएसएस लिखी है:

p {
  width: 100px;
  height: 50px;
  padding: 20px;
  border: 1px solid;
}

आपने 100 पिक्सल चौड़ाई तय की थी, लेकिन कॉन्टेंट 142 पिक्सल चौड़ा दिखता है. साथ ही, यह आपके एलिमेंट से बाहर निकल जाता है. ऐसा क्यों है?

बॉक्स मॉडल, सीएसएस का एक अहम हिस्सा है. बॉक्स मॉडल के काम करने का तरीका, सीएसएस के अन्य पहलुओं से इस पर पड़ने वाले असर, और सबसे अहम, इसे कंट्रोल करने के तरीके को समझने से, आपको सीएसएस को बेहतर तरीके से लिखने में मदद मिल सकती है.

यह याद रखना ज़रूरी है कि सीएसएस से दिखने वाला हर एलिमेंट एक बॉक्स होता है. भले ही, वह सिर्फ़ कुछ टेक्स्ट हो या उसमें border-radius हो, जिससे वह सर्कल जैसा दिखता हो.

कॉन्टेंट और साइज़िंग

बॉक्स, अपनी display वैल्यू, सेट किए गए डाइमेंशन, और उनमें मौजूद कॉन्टेंट के आधार पर अलग-अलग तरीके से काम करते हैं. यह कॉन्टेंट, सामान्य टेक्स्ट या चाइल्ड एलिमेंट से जनरेट किए गए ज़्यादा बॉक्स हो सकते हैं. किसी भी तरह का कॉन्टेंट होने पर, डिफ़ॉल्ट रूप से बॉक्स के साइज़ पर असर पड़ता है.

इसे एक्सट्रिंसिक साइज़िंग का इस्तेमाल करके कंट्रोल किया जा सकता है. इसके अलावा, इंट्रिंसिक साइज़िंग का इस्तेमाल करके, ब्राउज़र को कॉन्टेंट के साइज़ के आधार पर फ़ैसले लेने की अनुमति दी जा सकती है.

यहां एक बुनियादी डेमो दिया गया है, जिसमें दोनों के बीच का अंतर बताया गया है:

इस डेमो में, "CSS is awesome" शब्द, तय डाइमेंशन और मोटे बॉर्डर वाले बॉक्स में दिखते हैं. बॉक्स की चौड़ाई तय होने की वजह से, इसकी एक्सट्रिंसिक साइज़िंग होती है. इसका मतलब है कि यह अपने चाइल्ड कॉन्टेंट की साइज़िंग को कंट्रोल करता है. हालांकि, "awesome" शब्द बॉक्स के लिए बहुत बड़ा है. इसलिए, यह पैरंट बॉक्स के बॉर्डर बॉक्स से बाहर निकल जाता है. इसके बारे में ज़्यादा जानकारी बाद में दी जाएगी. इस ओवरफ़्लो को रोकने का एक तरीका यह है कि बॉक्स की इंट्रिंसिक साइज़िंग की जाए. इसके लिए, चौड़ाई सेट न करें या इस मामले में, width को min-content पर सेट करें. min-content कीवर्ड, बॉक्स को सिर्फ़ उतना चौड़ा होने के लिए कहता है जितना उसके कॉन्टेंट ("awesome" शब्द) की इंट्रिंसिक कम से कम चौड़ाई होती है. इससे बॉक्स, टेक्स्ट के चारों ओर पूरी तरह से फ़िट हो जाता है.

यहां एक ज़्यादा मुश्किल उदाहरण दिया गया है, जिसमें असली कॉन्टेंट पर अलग-अलग साइज़िंग के असर को दिखाया गया है:

एक्सट्रिंसिक साइज़िंग और इंट्रिंसिक साइज़िंग के बीच टॉगल करके देखें कि एक्सट्रिंसिक साइज़िंग से आपको ज़्यादा कंट्रोल कैसे मिलता है और इंट्रिंसिक साइज़िंग से कॉन्टेंट को ज़्यादा कंट्रोल कैसे मिलता है. इनके असर देखने के लिए, कार्ड में कुछ वाक्य जोड़ें. जब इस एलिमेंट की एक्सट्रिंसिक साइज़िंग होती है, तो इसमें तय सीमा से ज़्यादा कॉन्टेंट जोड़ने पर, वह बॉक्स से बाहर निकल जाता है. हालांकि, इंट्रिंसिक साइज़िंग चालू होने पर ऐसा नहीं होता.

डिफ़ॉल्ट रूप से, इस एलिमेंट की width और height, दोनों 400px पर सेट होती हैं. इन डाइमेंशन से एलिमेंट के अंदर मौजूद हर चीज़ के लिए सख्त सीमाएं तय होती हैं. इनका पालन तब तक किया जाता है, जब तक कॉन्टेंट बॉक्स के लिए बहुत बड़ा न हो. इसे देखने के लिए, फूल की तस्वीर के नीचे दिए गए कैप्शन को बदलकर, ऐसा कैप्शन डालें जो बॉक्स की ऊंचाई से ज़्यादा हो.

अहम शब्द: ओवरफ़्लो तब होता है, जब कॉन्टेंट, बॉक्स के लिए बहुत बड़ा होता है. overflow प्रॉपर्टी का इस्तेमाल करके, यह मैनेज किया जा सकता है कि कोई एलिमेंट, ओवरफ़्लो वाले कॉन्टेंट को कैसे हैंडल करता है.

इंट्रिंसिक साइज़िंग पर स्विच करने से, ब्राउज़र को बॉक्स के कॉन्टेंट के साइज़ के आधार पर फ़ैसले लेने की अनुमति मिलती है. इससे ओवरफ़्लो होने की संभावना काफ़ी कम हो जाती है, क्योंकि बॉक्स का साइज़ उसके कॉन्टेंट के हिसाब से बदलता है.

यह याद रखना ज़रूरी है कि इंट्रिंसिक साइज़िंग, ब्राउज़र का डिफ़ॉल्ट व्यवहार है. साथ ही, यह आम तौर पर एक्सट्रिंसिक साइज़िंग की तुलना में ज़्यादा फ़्लेक्सिबिलिटी देती है.

बॉक्स मॉडल के सेक्शन

बॉक्स, बॉक्स मॉडल के अलग-अलग सेक्शन से बने होते हैं. हर सेक्शन का अपना काम होता है.

कॉन्टेंट बॉक्स वह सेक्शन होता है जिसमें कॉन्टेंट मौजूद होता है. कॉन्टेंट, अपने पैरंट के साइज़ को कंट्रोल कर सकता है. इसलिए, यह आम तौर पर सबसे ज़्यादा साइज़ वाला सेक्शन होता है.

पैडिंग बॉक्स, कॉन्टेंट बॉक्स को घेरता है. यह padding प्रॉपर्टी से बनाई गई जगह होती है. पैडिंग बॉक्स के अंदर होती है. इसलिए, बॉक्स का बैकग्राउंड, पैडिंग से बनी जगह में दिखता है. अगर बॉक्स के लिए ओवरफ़्लो के नियम सेट किए गए हैं, जैसे कि overflow: auto या overflow: scroll, तो स्क्रोलबार भी इसी जगह पर दिखते हैं.

बॉर्डर बॉक्स, पैडिंग बॉक्स को घेरता है. इसकी जगह, border वैल्यू से तय होती है. इससे एलिमेंट के लिए एक विज़ुअल फ़्रेम बनता है. एलिमेंट का बॉर्डर एज, वह सीमा होती है जिसके अंदर कॉन्टेंट दिखता है.

आखिरी सेक्शन, मार्जिन बॉक्स, आपके बॉक्स के चारों ओर की जगह होती है. यह बॉक्स के margin नियम से तय होती है. outline और box-shadow जैसी प्रॉपर्टी भी इसी जगह पर दिखती हैं, क्योंकि इन्हें एलिमेंट के ऊपर पेंट किया जाता है. साथ ही, इनसे बॉक्स के साइज़ पर कोई असर नहीं पड़ता. किसी बॉक्स के outline-width को 200px पर बदलने से, बॉर्डर एज के अंदर मौजूद कॉन्टेंट पर कोई असर नहीं पड़ता.

एक काम की ऐनलॉजी

बॉक्स मॉडल को समझना मुश्किल है. इसलिए, अब तक सीखी गई बातों के लिए यहां एक ऐनलॉजी दी गई है.

इस डायग्राम में, दीवार पर एक के बगल में तीन फ़ोटो फ़्रेम लगे हैं. फ़्रेम की गई इमेज के एलिमेंट, बॉक्स मॉडल से इस तरह मेल खाते हैं:

• कॉन्टेंट बॉक्स, आर्टवर्क है.
• पैडिंग बॉक्स, फ़्रेम और आर्टवर्क के बीच का सफ़ेद माउंटिंग बोर्ड है.
• बॉर्डर बॉक्स, फ़्रेम है. यह आर्टवर्क के लिए एक बॉर्डर बनाता है.
• मार्जिन बॉक्स, फ़्रेम के बीच की जगह है.
• शैडो, मार्जिन बॉक्स वाली जगह पर ही दिखता है.

बॉक्स मॉडल को डीबग करना

ब्राउज़र के डेवलपर टूल, चुने गए बॉक्स के बॉक्स मॉडल की कैलकुलेशन को विज़ुअलाइज़ करते हैं. इससे आपको यह समझने में मदद मिल सकती है कि बॉक्स मॉडल कैसे काम करता है और इसका असर, आपकी वेबसाइट पर कैसे पड़ता है.

Chrome में इसे आज़माने के लिए:

1. DevTools खोलें.
2. कोई एलिमेंट चुनें.
3. बॉक्स मॉडल डीबगर दिखाएं.

बॉक्स मॉडल को कंट्रोल करना

बॉक्स मॉडल को कंट्रोल करने का तरीका समझने के लिए, सबसे पहले आपको यह समझना होगा कि आपके ब्राउज़र में क्या होता है.

हर ब्राउज़र, एचटीएमएल दस्‍तावेज़ों पर यूज़र एजेंट स्टाइल शीट लागू करता है. स्टाइलशीट तय करती है कि एलिमेंट कैसे दिखें और काम करें. यह तब लागू होती है, जब एलिमेंट के लिए सीएसएस तय नहीं की जाती. उपयोगकर्ता एजेंट स्टाइलशीट में मौजूद सीएसएस, ब्राउज़र के हिसाब से अलग-अलग होती है. हालांकि, हर ब्राउज़र में डिफ़ॉल्ट सेटिंग होती हैं, जिनसे कॉन्टेंट को आसानी से पढ़ा जा सकता है.

उपयोगकर्ता एजेंट स्टाइल शीट, display प्रॉपर्टी वाले एलिमेंट के लिए डिफ़ॉल्ट वैल्यू सेट करती है. उदाहरण के लिए, <div> एलिमेंट की डिफ़ॉल्ट display वैल्यू block होती है. <li> की डिफ़ॉल्ट display वैल्यू list-item होती है. वहीं, <span> की डिफ़ॉल्ट display वैल्यू inline होती है.

inline एलिमेंट में ब्लॉक मार्जिन होता है, लेकिन अन्य एलिमेंट इसका पालन नहीं करते. inline-block के साथ, अन्य एलिमेंट ब्लॉक मार्जिन का पालन करते हैं. हालांकि, पहले एलिमेंट का व्यवहार, inline एलिमेंट के तौर पर ही बना रहता है. एक block आइटम, डिफ़ॉल्ट रूप से उपलब्ध इनलाइन स्पेस को भर देता है. वहीं, inline और inline-block एलिमेंट का साइज़, सिर्फ़ उनके कॉन्टेंट के बराबर होता है.

उपयोगकर्ता एजेंट स्टाइल शीट, box-sizing के लिए भी डिफ़ॉल्ट वैल्यू सेट करती है. इससे बॉक्स को अपना साइज़ कैलकुलेट करने का तरीका पता चलता है. डिफ़ॉल्ट रूप से, सभी एलिमेंट box-sizing: content-box; पर सेट होते हैं. इसका मतलब है कि जब width और height जैसे डाइमेंशन सेट किए जाते हैं, तो वे कॉन्टेंट बॉक्स पर लागू होते हैं. इसके बाद, अगर padding और border सेट किए जाते हैं, तो इन वैल्यू को कॉन्टेंट बॉक्स के साइज़ में जोड़ा जाता है.

देखें कि आपको कितना समझ आया

बॉक्स मॉडल के साइज़ पर असर डालने वाली प्रॉपर्टी के बारे में अपनी जानकारी की जांच करें.

.my-box {
  width: 200px;
  border: 10px solid;
  padding: 20px;
}

इस बॉक्स की असल चौड़ाई 260 पिक्सल है. सीएसएस में डिफ़ॉल्ट box-sizing: content-box का इस्तेमाल किया जाता है. इसलिए, लागू की गई चौड़ाई, कॉन्टेंट की चौड़ाई होती है. साथ ही, इसमें दोनों तरफ़ की padding और border को जोड़ा जाता है. कॉन्टेंट के लिए 200 पिक्सल + पैडिंग के लिए 40 पिक्सल + बॉर्डर के लिए 20 पिक्सल, कुल मिलाकर 260 पिक्सल चौड़ाई होती है.

border-box साइज़िंग तय करके, इसे बदला जा सकता है:

.my-box {
  box-sizing: border-box;
    width: 200px;
    border: 10px solid;
    padding: 20px;
}

इस वैकल्पिक बॉक्स मॉडल से, सीएसएस को width को कॉन्टेंट बॉक्स के बजाय बॉर्डर बॉक्स पर लागू करने के लिए कहा जाता है. इसका मतलब है कि हमारा border और padding, अंदर की ओर धकेल दिया जाता है. इसलिए, जब .my-box को 200px चौड़ा सेट किया जाता है, तो यह असल में 200px चौड़ा दिखता है.

देखें कि यह सुविधा, इंटरैक्टिव डेमो में कैसे काम करती है. box-sizing वैल्यू को टॉगल करने पर, नीले रंग का एरिया दिखाता है कि बॉक्स के अंदर कौनसी सीएसएस लागू की जा रही है.

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

यह सीएसएस नियम, दस्तावेज़ में मौजूद हर एलिमेंट और हर ::before और ::after स्यूडो एलिमेंट को चुनता है. साथ ही, box-sizing: border-box लागू करता है. इसका मतलब है कि अब हर एलिमेंट, इस वैकल्पिक बॉक्स मॉडल का इस्तेमाल करता है.

वैकल्पिक बॉक्स मॉडल ज़्यादा अनुमान के मुताबिक हो सकता है. इसलिए, डेवलपर अक्सर इस नियम को रीसेट और नॉर्मलाइज़र में जोड़ते हैं. जैसे, A (ज़्यादा) मॉडर्न सीएसएस रीसेट.

संसाधन

• बॉक्स मॉडल की शुरुआती जानकारी
• ब्राउज़र के डेवलपर टूल क्या होते हैं?

उपयोगकर्ता एजेंट स्टाइलशीट

• Chromium
• Firefox
• Webkit