बॉक्स मॉडल

The CSS Podcast - 001: The Box Model

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

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

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

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

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

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

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

डिफ़ॉल्ट रूप से, इस एलिमेंट में 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 लागू करता है. इसका मतलब है कि अब हर एलिमेंट, इस वैकल्पिक बॉक्स मॉडल का इस्तेमाल करता है.

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

संसाधन

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

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

• Chromium
• Firefox
• Webkit