ब्राउज़र यह निर्धारित करने के लिए सीएसएस बॉक्स मॉडल का उपयोग करता है कि किसी वेब पेज पर तत्व कैसे दिखना चाहिए। बॉक्स मॉडल एक तत्व के आकार और उसकी सीमा, पैडिंग और मार्जिन का प्रतिनिधित्व करता है। आप इनमें से प्रत्येक तत्व को अलग-अलग स्टाइल कर सकते हैं।
प्रत्येक तत्व एक बॉक्स से घिरा हुआ है। यह समझने में सक्षम होना कि ये बॉक्स कैसे काम करते हैं, आइटम को वेब पेज पर अपनी इच्छानुसार स्थान देने का एक अनिवार्य हिस्सा है।
CSS बॉक्स मॉडल का उपयोग यह निर्धारित करने के लिए किया जाता है कि किसी बॉक्स को कैसा दिखना चाहिए और इसे वेब पेज पर कैसे रखा जाना चाहिए। यह मॉडल चार घटकों को संदर्भित करता है- सामग्री, पैडिंग, बॉर्डर और मार्जिन- जो सीएसएस में एक बॉक्स बनाते हैं। यह ट्यूटोरियल CSS बॉक्स मॉडल की मूल बातें और उसके मुख्य भागों पर चर्चा करेगा।
सीएसएस बॉक्स मॉडल
CSS बॉक्स मॉडल CSS में सभी बॉक्स पर लागू संरचना है। यह बॉक्स मॉडल ब्राउज़र को निर्देश देता है कि कैसे एक बॉक्स के विभिन्न भाग एक तत्व बनाते हैं जो वेब पेज पर दिखाई देगा। बॉक्स मॉडल एक बॉक्स की सामग्री, पैडिंग, बॉर्डर और मार्जिन का प्रतिनिधित्व करता है।
आइए बॉक्स मॉडल के प्रत्येक तत्व पर एक नज़र डालें:
- सामग्री। बॉक्स की सामग्री, जहां टेक्स्ट, फॉर्म, इमेज और अन्य वेब तत्व दिखाई देंगे।
- पैडिंग। एक बॉक्स की सामग्री और बॉक्स की सीमा के बीच का स्थान। बॉक्स के लिए पैडिंग पारदर्शी होती है।
- सीमा. वह बॉर्डर जो किसी बॉक्स की सामग्री के चारों ओर जाता है, या एक पैडिंग मान निर्दिष्ट होने पर बॉक्स की पैडिंग के चारों ओर जाता है।
- मार्जिन। वेब पेज पर किसी बॉर्डर के बाहरी किनारे और अन्य तत्वों के बीच का स्थान। बॉक्स के लिए पैडिंग पारदर्शी होती है।
आइए इन घटकों में से प्रत्येक पर चर्चा करें और एक-एक करके उनका उपयोग कैसे करें।
सामग्री क्षेत्र
सामग्री क्षेत्र बॉक्स मॉडल के केंद्र में है। यह वह जगह है जहाँ पाठ, चित्र और अन्य तत्व वेब तत्व में दिखाई देते हैं। हम सामग्री क्षेत्र के आकार को निर्धारित करने के लिए ऊंचाई और चौड़ाई सीएसएस गुणों का उपयोग करते हैं।
डिफ़ॉल्ट रूप से, सामग्री क्षेत्र का आकार उसके तत्वों के आकार के बराबर होगा। यदि आपके पास टेक्स्ट की एक पंक्ति है, तो बॉक्स टेक्स्ट की पंक्ति जितना लंबा और लंबा होगा।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।
मान लीजिए कि हम एक बॉक्स डिजाइन करना चाहते हैं जो 200px लंबा और 200px चौड़ा हो। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:
<html>
<p>This is a box.</p>
</html>
<style>
p {
height: 200px;
width: 200px;
}
</style>
हमारे एचटीएमएल/सीएसएस कोड का आउटपुट देखने के लिए ऊपर दिए गए कोड संपादक में बटन।
टेक्स्ट का पैराग्राफ़ बनाने के लिए हमने HTML
टैग का इस्तेमाल किया। याद रखें, वेब डिज़ाइन में प्रत्येक तत्व एक बॉक्स में होता है, इसलिए बॉक्स मॉडल हमारे
टैग पर लागू होगा। हमारे सीएसएस कोड में, हम एक नियम बनाते हैं जो सभी
टैग की ऊंचाई 200px पर सेट करता है। हम सभी
टैग की चौड़ाई भी 200px पर सेट करते हैं।
चौड़ाई और ऊंचाई, और सीएसएस सामग्री क्षेत्र के बारे में अधिक जानने के लिए, सीएसएस ऊंचाई और चौड़ाई के लिए हमारी शुरुआती मार्गदर्शिका पढ़ें।
द पैडिंग एरिया
पैडिंग क्षेत्र सामग्री क्षेत्र का विस्तार करता है। यह एक बॉक्स की सामग्री और उसकी सीमा के बीच एक अंतर बनाता है। वेब पेज पर बैनर और अन्य घोषणा तत्वों को बनाने के लिए अक्सर पैडिंग का उपयोग किया जाता है।
किसी बॉक्स में पैडिंग लगाने के लिए, हम CSS पैडिंग प्रॉपर्टी का उपयोग कर सकते हैं। मान लीजिए कि हम अपने आखिरी बॉक्स के चारों ओर 25px की पैडिंग लगाना चाहते हैं। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:
<html>
<p>This is a box.</p>
</html>
<style>
p {
height: 200px;
width: 200px;
padding: 20px;
}
</style>
हमारे एचटीएमएल/सीएसएस कोड का आउटपुट देखने के लिए ऊपर दिए गए कोड संपादक में बटन।
हमने "पैडिंग" गुण निर्दिष्ट किया और इसका मान 20px पर सेट किया। यह हमारे बॉक्स के सामग्री क्षेत्र और हमारे बॉक्स के बॉर्डर के बीच 20px का अंतर बनाता है।
अब हमारे बॉक्स और पेज के किनारे के बीच एक गैप है।
सीमा क्षेत्र
बॉर्डर एरिया वह जगह है जहां बॉक्स के लिए बॉर्डर दिखाई देगा। बॉर्डर किसी भी पैडिंग के बाहर रंगीन आउटलाइन होते हैं। बॉर्डर को स्टाइल करने के लिए आप किसी भी रंग का उपयोग कर सकते हैं। सीमाओं के लिए भी कई अंतर्निर्मित डिज़ाइन हैं।
मान लीजिए हम अपने बॉक्स के चारों ओर 5px चौड़ा हल्का नीला बॉर्डर जोड़ना चाहते हैं। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:
<html>
<p>This is a box.</p>
</html>
<style>
p {
height: 200px;
width: 200px;
padding: 20px;
border: 5px solid lightblue;
}
</style>
हमारे एचटीएमएल/सीएसएस कोड का आउटपुट देखने के लिए ऊपर दिए गए कोड संपादक में बटन।
हम 5px-चौड़े हल्के नीले रंग के बॉर्डर को परिभाषित करने के लिए CSS "बॉर्डर" प्रॉपर्टी का उपयोग करते हैं। यह सीमा "ठोस" शैली का उपयोग करती है, जो एकल-पंक्ति सीमा बनाती है। ध्यान दें कि हमारी सीमा हमारे बॉक्स की सामग्री से अलग है। ऐसा इसलिए है क्योंकि हमने अपने बॉक्स के चारों ओर एक 20px पैडिंग निर्दिष्ट की है।
मार्जिन क्षेत्र
मार्जिन क्षेत्र बॉक्स मॉडल की सबसे बाहरी परत है। यह क्षेत्र एक खाली गैप बनाता है जो एक तत्व को वेब पेज पर अन्य तत्वों से अलग करता है।
मान लीजिए हम एक वेब पेज पर दो बॉक्स के बीच 10px स्पेस बनाना चाहते हैं। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:
<html>
<p>This is a box.</p>
<p>This is another box.</p>
</html>
<style>
p {
height: 200px;
width: 200px;
padding: 20px;
border: 5px solid lightblue;
margin: 10px;
}
</style>
हमारे एचटीएमएल/सीएसएस कोड का आउटपुट देखने के लिए ऊपर दिए गए कोड संपादक में बटन।
इस बार, हमने अपनी HTML फ़ाइल में दो बॉक्स निर्दिष्ट किए हैं। फिर, हमने "मार्जिन" संपत्ति का उपयोग करके अपने बॉक्स में 10px का मार्जिन लागू किया है।
जैसा कि आप देख सकते हैं, अब हमारे बक्सों के बीच 10px का अंतर है। ऐसा इसलिए है क्योंकि हमने अपने बक्सों पर मार्जिन लागू किया है। यह हमारे बॉक्स के बॉर्डर और वेब पेज के अन्य तत्वों के बीच एक गैप बनाता है।
मार्जिन क्षेत्र के बारे में अधिक जानने के लिए, सीएसएस मार्जिन पर हमारा ट्यूटोरियल पढ़ें।
चौड़ाई और ऊंचाई की गणना
एक गलती जो शुरुआती लोग करते हैं, वह यह मान लेना है कि किसी तत्व की ऊंचाई और उसकी चौड़ाई पैडिंग, मार्जिन और सीमाओं के लिए जिम्मेदार है। यह सटीक नहीं है।
ऊंचाई और चौड़ाई के गुण आपको सामग्री क्षेत्र . की ऊंचाई और चौड़ाई निर्धारित करने की अनुमति देते हैं एक वेब तत्व का। यह वेब पेज पर अन्य तत्वों के लिए जिम्मेदार नहीं है।
यदि हम यह जानना चाहते हैं कि पहले से हमारे पूरे बॉक्स उदाहरण में कितनी जगह है, तो हमें एक त्वरित गणना चलाने की आवश्यकता होगी। पिछले अनुभाग से हमारे "मार्जिन क्षेत्र" उदाहरण में निर्दिष्ट मूल्य यहां दिए गए हैं:
- ऊंचाई:200px
- चौड़ाई:200px
- पैडिंग:20px
- मार्जिन:10px
- सीमा:5px
चौड़ाई की गणना करने के लिए, हम निम्न सूत्र का उपयोग कर सकते हैं:
- 200px (चौड़ाई) +
- 40px (बाएं और दाएं पैडिंग) +
- 10px (बाएं और दाएं बॉर्डर) +
- 20px (बाएं और दाएं हाशिया)
इससे हमें कुल 270px . मिलता है .
ऊंचाई की गणना करने के लिए, हम बॉक्स की ऊंचाई का उपयोग करेंगे। हम पैडिंग, बॉर्डर और मार्जिन के लिए ऊपर और नीचे के मानों का भी उपयोग करेंगे।
निष्कर्ष
CSS बॉक्स मॉडल वह संरचना है जिसका उपयोग किसी वेब पेज पर किसी तत्व को प्रस्तुत करने के लिए किया जाता है। HTML में प्रत्येक तत्व एक आयताकार बॉक्स है। बॉक्स मॉडल परिभाषित करता है कि किसी बॉक्स के लिए सामग्री, पैडिंग, बॉर्डर और मार्जिन कैसे दिखाई देते हैं।
क्या आप CSS के साथ वेब पेज डिजाइन करने के बारे में अधिक जानना चाहते हैं? हमारी सीएसएस गाइड कैसे सीखें देखें। इस गाइड में उन शीर्ष शिक्षण संसाधनों की एक सूची है जिनका उपयोग आप सीएसएस के अपने ज्ञान को बढ़ाने के लिए कर सकते हैं।