सीएसएस पॉडकास्ट - 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 वैल्यू, उनके सेट डाइमेंशन, और उनमें शामिल कॉन्टेंट के आधार पर अलग-अलग व्यवहार होता है. यह कॉन्टेंट सादा टेक्स्ट हो सकता है या
चाइल्ड एलिमेंट से जनरेट हुए ज़्यादा बॉक्स हो सकते हैं. दोनों में से किसी भी तरह से, कॉन्टेंट से बॉक्स के साइज़
पर डिफ़ॉल्ट रूप से असर पड़ता है.
इसे बाहर रखने के लिए साइज़ का इस्तेमाल करके कंट्रोल किया जा सकता है. इसके अलावा, मूल साइज़ का इस्तेमाल किया जा सकता है, ताकि ब्राउज़र कॉन्टेंट के साइज़ के हिसाब से आपके लिए फ़ैसला ले सके.
यहां एक बुनियादी डेमो दिया गया है, जो दोनों में अंतर के बारे में बताता है:
डेमो में तय डाइमेंशन और एक मोटे बॉर्डर वाले बॉक्स में "सीएसएस शानदार है" शब्द है. बॉक्स की चौड़ाई तय है, इसलिए इसका साइज़ बहुत बड़ा है.
इसका मतलब है कि यह अपने चाइल्ड कॉन्टेंट के साइज़ को कंट्रोल करता है. हालांकि, बॉक्स के लिए
"awesome" शब्द बहुत बड़ा है, इसलिए यह पैरंट बॉक्स के
बॉर्डर बॉक्स के बाहर ओवरफ़्लो हो गया है (इस बारे में ज़्यादा जानकारी बाद में). इस ओवरफ़्लो को रोकने का एक तरीका यह है कि चौड़ाई को सेट न करके या इस मामले में, width को min-content पर सेट करके बॉक्स को असल साइज़ में रखें. min-content कीवर्ड, बॉक्स को
कॉन्टेंट की कम से कम चौड़ाई (शब्द
"बेहतरीन") जितना चौड़ा
होगा. इससे बॉक्स, टेक्स्ट के चारों ओर पूरी तरह से फ़िट हो जाता है.
यहां एक मुश्किल उदाहरण दिया गया है. इसमें रीयल कॉन्टेंट पर अलग-अलग साइज़ों के असर को दिखाया गया है:
स्वाभाविक साइज़ों को चालू और बंद पर टॉगल करें और देखें कि बाहरी साइज़ से आपको ज़्यादा कंट्रोल कैसे मिलता है. बाहरी साइज़ और स्वाभाविक साइज़ से कॉन्टेंट को ज़्यादा कंट्रोल कैसे मिलता है. इफ़ेक्ट देखने के लिए, कार्ड में टेक्स्ट के कुछ वाक्य जोड़ें. अगर इस एलिमेंट का साइज़ बाहरी होता है, तो सीमा से ज़्यादा कॉन्टेंट जोड़ने से पहले, इसे जोड़ा जा सकता है. हालांकि, स्वाभाविक साइज़ से जुड़ी सेटिंग को टॉगल करने पर ऐसा नहीं होता.
डिफ़ॉल्ट रूप से, इस एलिमेंट में 400px के width और height सेट होते हैं.
ये डाइमेंशन, एलिमेंट के अंदर की हर चीज़ के लिए सख्त सीमाएं तय करते हैं.
इन डाइमेंशन का इस्तेमाल तब तक किया जाता है, जब तक कि बॉक्स के लिए कॉन्टेंट बहुत बड़ा न हो. इसे काम करते हुए देखा जा सकता है. इसके लिए, आपको फूल के नीचे मौजूद कैप्शन को बॉक्स की ऊंचाई से
ज़्यादा तापमान में बदलना होगा.
मुख्य शब्द: ओवरफ़्लो तब होता है, जब कॉन्टेंट उस बॉक्स के हिसाब से बहुत बड़ा होता है जिसमें वह है. overflow प्रॉपर्टी का इस्तेमाल करके, यह मैनेज किया जा सकता है कि कोई एलिमेंट, ओवरफ़्लो कॉन्टेंट को कैसे मैनेज करता है.
स्वाभाविक आकार पर स्विच करने से ब्राउज़र बॉक्स के कॉन्टेंट के साइज़ के आधार पर आपके लिए फ़ैसले लेता है. इससे ओवरफ़्लो की संभावना बहुत कम हो जाती है, क्योंकि बॉक्स का आकार अपनी सामग्री के साथ बदल जाता है.
यह ध्यान रखना ज़रूरी है कि साइज़ तय करना, ब्राउज़र की डिफ़ॉल्ट सेटिंग होती है. साथ ही, यह आम तौर पर बाहरी साइज़ की तुलना में ज़्यादा विकल्प देता है.
बॉक्स मॉडल के हिस्से
बॉक्स अलग-अलग बॉक्स मॉडल क्षेत्रों से बने होते हैं जो सभी एक विशिष्ट काम करते हैं.
कॉन्टेंट बॉक्स वह हिस्सा होता है जिसमें कॉन्टेंट मौजूद होता है. कॉन्टेंट, अपने पैरंट का साइज़ कंट्रोल कर सकता है. इसलिए, आम तौर पर यह सबसे बड़ा साइज़ होता है.
पैडिंग बॉक्स, कॉन्टेंट बॉक्स के चारों ओर होता है और padding प्रॉपर्टी से बनाई गई स्पेस होती है.
पैडिंग (जगह) बॉक्स के अंदर होती है. इसलिए, बॉक्स के बनाए गए स्पेस में बॉक्स का बैकग्राउंड दिखता है.
अगर बॉक्स पर overflow: auto या
overflow: scroll जैसे ओवरफ़्लो नियम सेट हैं, तो स्क्रोलबार भी इस स्पेस में शामिल हो जाएंगे.
पैडिंग बॉक्स के चारों तरफ़ बॉर्डर बॉक्स होता है. इसमें स्पेस border की वैल्यू से तय होता है, जो एलिमेंट के लिए एक विज़ुअल फ़्रेम बनाता है. एलिमेंट का बॉर्डर का किनारा वह
सीमा होती है जिसे आप देख सकते हैं.
आखिरी हिस्सा, मार्जिन बॉक्स आपके बॉक्स के आस-पास की जगह होती है, जिसे बॉक्स के margin नियम के तहत तय किया जाता है. outline और box-shadow जैसी प्रॉपर्टी भी इस जगह का हिस्सा बन जाती हैं. ऐसा इसलिए होता है, क्योंकि इन्हें एलिमेंट के सबसे ऊपर पेंट किया जाता है और इनसे बॉक्स के साइज़ पर कोई असर नहीं पड़ता. किसी बॉक्स पर अपने बॉक्स का 200px का outline-width बदलने से बॉर्डर के किनारे के अंदर कुछ भी नहीं बदलता.
एक उपयोगी तुलना
बॉक्स मॉडल को समझना मुश्किल है. इसलिए, आपने अब तक जो कुछ भी सीखा है उसकी तुलना यहां दी गई है.
इस डायग्राम में, किसी दीवार पर एक-दूसरे के बगल में तीन फ़ोटो फ़्रेम लगाए गए हैं. फ़्रेम की गई इमेज के एलिमेंट, बॉक्स मॉडल के हिसाब से होते हैं:
- कॉन्टेंट बॉक्स, आर्टवर्क होता है.
- पैडिंग बॉक्स, फ़्रेम और आर्टवर्क के बीच में सफ़ेद माउंटिंग बोर्ड होता है.
- बॉर्डर बॉक्स, आर्टवर्क के लिए एक लिटरल बॉर्डर देता है.
- मार्जिन बॉक्स, फ़्रेम के बीच की खाली जगह होती है.
- शैडो, मार्जिन बॉक्स के बराबर जगह लेती है.
बॉक्स के मॉडल को डीबग करना
ब्राउज़र DevTools, चुने गए बॉक्स के बॉक्स मॉडल का कैलकुलेशन दिखाता है. इससे आपको यह समझने में मदद मिल सकती है कि बॉक्स मॉडल कैसे काम करता है और यह उस वेबसाइट पर किस तरह असर डालता है जिस पर काम किया जा रहा है.
इसे अपने ब्राउज़र में आज़माएं:
- DevTools खोलें.
- कोई एलिमेंट चुनें.
- बॉक्स मॉडल डीबगर दिखाएं.
बॉक्स मॉडल को कंट्रोल करें
बॉक्स मॉडल को कंट्रोल करने का तरीका जानने के लिए, आपको सबसे पहले यह समझना होगा कि आपके ब्राउज़र में क्या होता है.
हर ब्राउज़र, एचटीएमएल दस्तावेज़ों पर एक उपयोगकर्ता एजेंट स्टाइल शीट लागू करता है. इससे पता चलता है कि अगर एलिमेंट में कोई तय सीएसएस नहीं है, तो उन्हें कैसा दिखना चाहिए और काम करना चाहिए. हर ब्राउज़र के लिए उपयोगकर्ता एजेंट स्टाइल शीट में मौजूद सीएसएस अलग-अलग होती हैं. हालांकि, वे कॉन्टेंट को डिफ़ॉल्ट रूप से पढ़ने लायक बनाती हैं, ताकि पढ़ने में आसानी हो.
उपयोगकर्ता एजेंट स्टाइल शीट की एक प्रॉपर्टी, बॉक्स का डिफ़ॉल्ट 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;
}
आपके हिसाब से .my-box की चौड़ाई कितनी होगी?
box-sizing: border-box हो, तो 200px सही होगा.
इस बॉक्स की असल चौड़ाई 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 लागू करता है.
इसका मतलब है कि अब हर एलिमेंट, वैकल्पिक बॉक्स मॉडल का इस्तेमाल करता है.
वैकल्पिक बॉक्स मॉडल का ज़्यादा अनुमान लगाया जा सकता है, इसलिए डेवलपर अक्सर इस नियम को रीसेट और नॉर्मलाइज़र पर जोड़ते हैं, जैसे कि यह.