CSS बॉक्स मॉडल: एक हाउ-टू गाइड

ब्राउज़र CSS बॉक्स मॉडल का उपयोग यह निर्धारित करने के लिए करता है कि एक एलिमेंट को वेब पेज पर कैसे दिखना चाहिए। बॉक्स मॉडल एक एलिमेंट के आकार और उसके बॉर्डर, पैडिंग, और मार्जिन को दर्शाता है। आप इनमें से प्रत्येक एलिमेंट को व्यक्तिगत रूप से स्टाइल कर सकते हैं।

हर एलिमेंट एक बॉक्स से घिरा होता है। यह समझने में सक्षम होना कि ये बॉक्स कैसे काम करते हैं, वेब पेज पर आइटम्स को उस तरह पोजिशन करने का एक अनिवार्य हिस्सा है जैसा आप चाहते हैं।

CSS बॉक्स मॉडल का उपयोग यह निर्धारित करने के लिए किया जाता है कि एक बॉक्स को कैसे दिखना चाहिए, और इसे वेब पेज पर कैसे पोजिशन किया जाना चाहिए। यह मॉडल चार घटकों - कंटेंट, पैडिंग, बॉर्डर, और मार्जिन - को संदर्भित करता है जो CSS में एक बॉक्स बनाते हैं। यह ट्यूटोरियल CSS बॉक्स मॉडल की मूल बातें और इसके मुख्य भागों पर चर्चा करेगा।

CSS बॉक्स मॉडल

CSS बॉक्स मॉडल CSS में सभी बॉक्स पर लागू होने वाली संरचना है। यह बॉक्स मॉडल ब्राउज़र को निर्देश देता है कि एक बॉक्स के विभिन्न भाग एक एलिमेंट कैसे बनाते हैं जो वेब पेज पर दिखाई देगा। बॉक्स मॉडल एक बॉक्स के कंटेंट, पैडिंग, बॉर्डर, और मार्जिन को दर्शाता है।

आइए बॉक्स मॉडल के प्रत्येक एलिमेंट पर एक नज़र डालते हैं:

• कंटेंट। बॉक्स का कंटेंट, जहां टेक्स्ट, फॉर्म्स, इमेजेज, और अन्य वेब एलिमेंट्स दिखाई देंगे।
• पैडिंग। बॉक्स के कंटेंट और बॉक्स के बॉर्डर के बीच का स्थान। बॉक्स के लिए पैडिंग ट्रांसपेरेंट है।
• बॉर्डर। बॉक्स के कंटेंट के चारों ओर जाने वाला बॉर्डर, या बॉक्स के पैडिंग के चारों ओर अगर पैडिंग वैल्यू निर्दिष्ट है।
• मार्जिन। बॉर्डर के बाहरी किनारे और वेब पेज पर अन्य एलिमेंट्स के बीच का स्थान। बॉक्स के लिए पैडिंग ट्रांसपेरेंट है।

आइए इनमें से प्रत्येक कंपोनेंट और उनका उपयोग कैसे करें, एक-एक करके चर्चा करते हैं।

कंटेंट एरिया

कंटेंट एरिया बॉक्स मॉडल के केंद्र में है। यह वह जगह है जहां टेक्स्ट, इमेजेज, और अन्य एलिमेंट्स एक वेब एलिमेंट में दिखाई देते हैं। हम कंटेंट एरिया के आकार को निर्धारित करने के लिए हाइट और विड्थ CSS प्रॉपर्टीज का उपयोग करते हैं।

डिफ़ॉल्ट रूप से, एक कंटेंट एरिया का आकार उसके एलिमेंट्स के आकार के बराबर होगा। यदि आपके पास टेक्स्ट की एक लाइन है, तो बॉक्स उतना ही लंबा और उतना ही लंबा होगा जितनी टेक्स्ट की लाइन।

मान लीजिए हम एक बॉक्स डिज़ाइन करना चाहते हैं जो 200px लंबा और 200px चौड़ा हो। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:

<html> <p>This is a box.</p> </html> <style> p { height: 200px; width: 200px; } </style>

ऊपर कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

हमने टेक्स्ट का एक पैराग्राफ बनाने के लिए HTML <p> टैग का उपयोग किया। याद रखें, वेब डिज़ाइन में हर एलिमेंट एक बॉक्स में होता है, इसलिए बॉक्स मॉडल हमारे <p> टैग पर लागू होगा। हमारे CSS कोड में, हम एक नियम बनाते हैं जो सभी <p> टैग्स की हाइट को 200px पर सेट करता है। हम सभी <p> टैग्स की विड्थ को 200px पर भी सेट करते हैं।

विड्थ और हाइट, और CSS कंटेंट एरिया के बारे में अधिक जानने के लिए, CSS हाइट और विड्थ के लिए हमारे शुरुआती गाइड को पढ़ें।

पैडिंग एरिया

पैडिंग एरिया कंटेंट एरिया को बढ़ाता है। यह बॉक्स के कंटेंट और उसके बॉर्डर के बीच एक गैप बनाता है। पैडिंग का उपयोग अक्सर वेब पेज पर बैनर्स और अन्य घोषणा एलिमेंट्स बनाने के लिए किया जाता है।

एक बॉक्स पर पैडिंग लागू करने के लिए, हम CSS पैडिंग प्रॉपर्टी का उपयोग कर सकते हैं। मान लीजिए हम अपने पिछले बॉक्स के चारों ओर 25px पैडिंग लागू करना चाहते हैं। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:

<html> <p>This is a box.</p> </html> <style> p { height: 200px; width: 200px; padding: 20px; } </style>

ऊपर कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

हमने "पैडिंग" प्रॉपर्टी निर्दिष्ट की और इसका मान 20px पर सेट किया। यह हमारे बॉक्स के कंटेंट एरिया और हमारे बॉक्स के बॉर्डर के बीच 20px का गैप बनाता है।

अब हमारे बॉक्स और पेज के किनारे के बीच एक गैप है।

बॉर्डर एरिया

बॉर्डर एरिया वह जगह है जहां एक बॉक्स के लिए बॉर्डर दिखाई देगा। बॉर्डर्स किसी भी पैडिंग के बाहर कलर्ड आउटलाइन्स हैं। आप बॉर्डर को स्टाइल करने के लिए किसी भी कलर का उपयोग कर सकते हैं। बॉर्डर्स के लिए कई बिल्ट-इन डिज़ाइन भी हैं।

मान लीजिए हम अपने बॉक्स के चारों ओर 5px चौड़ा लाइट ब्लू बॉर्डर जोड़ना चाहते हैं। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:

<html> <p>This is a box.</p> </html> <style> p { height: 200px; width: 200px; padding: 20px; border: 5px solid lightblue; } </style>

ऊपर कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

हम 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/CSS कोड का आउटपुट देखें।

इस बार, हमने अपनी HTML फाइल में दो बॉक्स निर्दिष्ट किए हैं। फिर, हमने "मार्जिन" प्रॉपर्टी का उपयोग करके अपने बॉक्स पर 10px मार्जिन लागू किया है।

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

मार्जिन एरिया के बारे में अधिक जानने के लिए, CSS मार्जिन पर हमारे ट्यूटोरियल को पढ़ें।

विड्थ और हाइट गणना

शुरुआती लोग जो एक गलती करते हैं वह यह मान लेना है कि एक एलिमेंट की हाइट और इसकी विड्थ पैडिंग, मार्जिन, और बॉर्डर्स को ध्यान में रखती है। यह सटीक नहीं है।

हाइट और विड्थ प्रॉपर्टीज आपको वेब एलिमेंट के कंटेंट एरिया की हाइट और विड्थ सेट करने की अनुमति देती हैं। यह वेब पेज पर अन्य एलिमेंट्स को ध्यान में नहीं रखता है।

यदि हम जानना चाहते थे कि हमारे पहले के पूर्ण बॉक्स उदाहरण में कितना स्पेस लगता है, तो हमें एक त्वरित गणना चलाने की आवश्यकता होगी। यहां वे मान हैं जो हमने पिछले अनुभाग के "मार्जिन एरिया" उदाहरण में निर्दिष्ट किए थे:

• हाइट: 200px
• विड्थ: 200px
• पैडिंग: 20px
• मार्जिन: 10px
• बॉर्डर: 5px

विड्थ की गणना करने के लिए, हम निम्न सूत्र का उपयोग कर सकते हैं:

• 200px (विड्थ) +
• 40px (लेफ्ट और राइट पैडिंग) +
• 10px (लेफ्ट और राइट बॉर्डर) +
• 20px (लेफ्ट और राइट मार्जिन)

यह हमें कुल 270px देता है।

हाइट की गणना करने के लिए, हम बॉक्स की हाइट का उपयोग करेंगे। हम पैडिंग, बॉर्डर, और मार्जिन के लिए टॉप और बॉटम मानों का भी उपयोग करेंगे।

निष्कर्ष

CSS बॉक्स मॉडल एक वेब पेज पर एलिमेंट को रेंडर करने के लिए उपयोग की जाने वाली संरचना है। HTML में हर एलिमेंट एक आयताकार बॉक्स है। बॉक्स मॉडल परिभाषित करता है कि एक बॉक्स के लिए कंटेंट, पैडिंग, बॉर्डर, और मार्जिन कैसे दिखाई देते हैं।

क्या आप CSS के साथ वेब पेज डिज़ाइन करना सीखना चाहते हैं? हमारा CSS सीखने का गाइड देखें। इस गाइड में शीर्ष शिक्षण संसाधनों की एक सूची है जिनका उपयोग आप अपने CSS ज्ञान को बनाने के लिए कर सकते हैं।