CSS Box Model in Hindi – CSS Box Model क्या है, Properties और पूरी जानकारी

नमस्कार दोस्तों! अगर आप CSS Box Model in Hindi सीखना चाहते हैं, तो यह आर्टिकल आपके लिए बहुत ही मददगार होने वाला है। वेब डिज़ाइन और वेब डेवलपमेंट में CSS बॉक्स मॉडल की समझ बेहद ज़रूरी है क्योंकि हर HTML एलिमेंट को ब्राउज़र इसी बॉक्स मॉडल के आधार पर रेंडर करता है। इस आर्टिकल में हम आसान भाषा में जानेंगे कि CSS Box Model क्या है, इसकी properties कौन-कौन सी होती हैं (content, padding, border, margin) और यह वेब पेज के layout को कैसे प्रभावित करता है।

CSS में बॉक्स मॉडल क्या है? (What Is Box Model in CSS in Hindi)

CSS बॉक्स मॉडल वेब डेवलपमेंट का एक बहुत ही महत्वपूर्ण कॉन्सेप्ट है। यह बताता है कि किसी HTML एलिमेंट को ब्राउज़र में कैसे दिखाया जाता है और उसका आकार (dimensions) कैसे कैलकुलेट होता है।

CSS में हर HTML element एक box की तरह होता है। इसे हम Box Model कहते हैं। Box Model हमें यह समझने में मदद करता है कि किसी element का content, padding, border, और margin कैसे काम करते हैं और web page पर element की जगह और आकार को कैसे control किया जा सकता है।

Box Model का मूल उद्देश्य

Box Model का main purpose है element की layout और spacing को accurately control करना। Web designing में कई बार elements एक-दूसरे के ऊपर या बाहर overlap हो जाते हैं। Box Model की समझ से हम element ke content aur uske surrounding spaces ko efficiently manage कर सकते हैं।

Box Model के मुख्य घटक (Components)

1. Content (कंटेंट)
   • यह box का core हिस्सा होता है, यानी element के अंदर दिखने वाला text, image या media।
   • उदाहरण: अगर हम <div> में text डालते हैं, तो वही text content कहलाता है।
2. Padding (पैडिंग)
   • Content और border के बीच की space को padding कहते हैं।
   • Padding content को border से दूर रखता है और element को visually बेहतर बनाता है।
   • Example: padding: 10px;
3. Border (बॉर्डर)
   • यह padding और margin के बीच की line होती है जो element को outline देती है।
   • Border style, width, और color set करके element को highlight किया जा सकता है।
   • Example: border: 2px solid black;
4. Margin (मार्जिन)
   • Border और अन्य elements के बीच की space को margin कहते हैं।
   • Margin element को page पर proper distance पर रखता है।
   • Example: margin: 20px;

आसान उदाहरण / Real-life Example

सोचिए आप एक gift box को wrap कर रहे हैं:

• Chocolate = Content
• Plastic wrap = Padding
• Cardboard cover = Border
• Wrapping paper = Margin

इस analogy से आसानी से समझा जा सकता है कि Box Model में हर layer का अलग purpose होता है।

CSS Box Model का Diagram – CSS Box Model in Hindi को Diagram से समझो

CSS Box Model को समझने के लिए नीचे दिया गया डायग्राम देखें:

इस डायग्राम में:

1. मार्जिन (Margin): बॉर्डर और दूसरे एलिमेंट्स के बीच की दूरी।
2. बॉर्डर (Border): पैडिंग और मार्जिन के बीच की रेखा।
3. पैडिंग (Padding): कंटेंट और बॉर्डर के बीच की खाली जगह।
4. कंटेंट (Content): यह एलिमेंट का मुख्य भाग है, जैसे टेक्स्ट या इमेज।

---

CSS बॉक्स मॉडल के Properties – Properties of CSS Box Model In Hindi

CSS Box Model के चार मुख्य प्रॉपर्टीज हैं:

1. Content (कंटेंट)

कंटेंट HTML एलिमेंट का वास्तविक मटेरियल होता है, जैसे टेक्स्ट, इमेज, वीडियो या अन्य मीडिया। यह बॉक्स का सबसे अंदरूनी हिस्सा होता है।

• कंटेंट का साइज width और height प्रॉपर्टीज से कंट्रोल होता है।
• डिफ़ॉल्ट रूप से, यह साइज पैडिंग, बॉर्डर और मार्जिन से अलग होता है (जब तक box-sizing: border-box न लगाया जाए)।

उदाहरण:

<div style="width: 200px; height: 100px; background: lightblue;">
  यह डिव का कंटेंट है
</div>

आउटपुट:

200px चौड़ा और 100px ऊँचा नीला बॉक्स जिसमें टेक्स्ट दिखेगा।

2. Padding (पैडिंग)

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

• पैडिंग बैकग्राउंड कलर/इमेज को शो करती है।
• इसे अलग-अलग साइड्स (टॉप, राइट, बॉटम, लेफ्ट) के लिए अलग-अलग सेट किया जा सकता है।

उदाहरण:

button {
  padding: 10px 20px;  /* टॉप-बॉटम: 10px, लेफ्ट-राइट: 20px */
  background: #4CAF50;
  color: white;
}

इफेक्ट: बटन का टेक्स्ट, बॉर्डर से 10px ऊपर-नीचे और 20px दाएँ-बाएँ दूर हो जाएगा।

3. Border (बॉर्डर)

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

• बॉर्डर के 3 मुख्य गुण: width (मोटाई), style (सॉलिड/डैश्ड), color।
• border-radius से बॉर्डर को राउंडेड बनाया जा सकता है।

उदाहरण:

.card {
  border: 3px dashed #e74c3c;  /* 3px मोटी लाल डैश्ड लाइन */
  border-radius: 10px;         /* 10px राउंडेड कॉर्नर */
}

इफेक्ट: डैश्ड रेड बॉर्डर वाला कार्ड बनेगा जिसके कॉर्नर राउंडेड होंगे।

4. Margin (मार्जिन)

मार्जिन बॉर्डर और दूसरे एलिमेंट्स के बीच की बाहरी दूरी होती है। यह एलिमेंट्स को एक-दूसरे से अलग करती है।

• मार्जिन का बैकग्राउंड कलर/इमेज दिखाई नहीं देता।
• नेगेटिव मार्जिन (-10px) भी सेट की जा सकती है।
• मार्जिन कॉलैप्स: दो वर्टिकल मार्जिन्स में से सिर्फ़ बड़ा मार्जिन एप्लाई होता है।

उदाहरण:

.box {
  margin: 20px auto;  /* टॉप-बॉटम: 20px, लेफ्ट-राइट: ऑटो (सेंटर में) */
  width: 80%;
}

इफेक्ट: बॉक्स पेज के सेंटर में आ जाएगा और उसके ऊपर-नीचे 20px स्पेस होगी।

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

---

CSS Box Model का उदाहरण और Output के साथ

अब हम एक प्रैक्टिकल उदाहरण के साथ CSS Box Model को समझेंगे। यह उदाहरण आपको बॉक्स मॉडल के हर भाग (कंटेंट, पैडिंग, बॉर्डर, मार्जिन) को अलग-अलग देखने में मदद करेगा।

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;               /* कंटेंट की चौड़ाई */
      height: 100px;              /* कंटेंट की ऊँचाई */
      padding: 20px;              /* सभी तरफ 20px पैडिंग */
      border: 5px solid #3498db;  /* 5px नीली सॉलिड बॉर्डर */
      margin: 30px;               /* सभी तरफ 30px मार्जिन */
      background: #f1c40f;        /* पीला बैकग्राउंड */
    }
  </style>
</head>
<body>
  <div class="box">
    यह एक डिव बॉक्स है!
  </div>
</body>
</html>

आउटपुट (Output):

एक पीले रंग का बॉक्स जिसमें नीली बॉर्डर है और टेक्स्ट बीच में है

इस उदाहरण से क्या सीखा?

1. कंटेंट: width और height सिर्फ कंटेंट के लिए हैं (जब तक box-sizing: border-box न लगाया जाए)।
2. पैडिंग: बैकग्राउंड कलर पैडिंग एरिया तक दिखता है।
3. बॉर्डर: पैडिंग के बाहर एक सॉलिड लाइन बनाता है।
4. मार्जिन: बॉर्डर के बाहर की खाली जगह, जो दूसरे एलिमेंट्स से दूरी बनाती है।

---

FAQs (अक्सर पूछे जाने वाले सवाल) – CSS Box Model in Hindi

---

इसे भी पढ़े –

• CSS Kya Hai in Hindi – Full Form, Types, Syntax और Example
• CSS Colors in Hindi – आसान हिंदी में पूरी जानकारी
• HTML Kya Hai? जानिए HTML का इतिहास, फीचर्स, टैग्स और फायदे
• HTML Form in Hindi – HTML Form क्या है और कैसे बनाएं
• Loops in JavaScript in Hindi – जानें जावास्क्रिप्ट लूप क्या होते हैं और कैसे काम करते हैं
• C Language Kya Hai? जानिए पूरी जानकारी हिंदी में
• Decision Making In C In Hindi – if, if-else, switch, break और goto स्टेटमेंट्स
• Array in C in Hindi – ऐरे क्या है? प्रकार और पूरी जानकारी

---

निष्कर्ष (Conclusion) – CSS Box Model in Hindi

दोस्तों, उम्मीद है कि अब आपको CSS Box Model in Hindi अच्छे से समझ आ गया होगा। यह concept वेब डिज़ाइनिंग और फ्रंट-एंड डेवलपमेंट का एक बेसिक लेकिन बहुत ही महत्वपूर्ण हिस्सा है। अगर आप padding, border और margin जैसी properties को सही से इस्तेमाल करना सीख जाते हैं, तो आप किसी भी webpage का layout आसानी से control कर सकते हैं।

दोस्तों, अगर आपको यह आर्टिकल मददगार लगा हो तो इसे share करें, comment करें और अपने दोस्तों को भी recommend करें।
अगला आर्टिकल किस topic पर चाहिए? Comment करके ज़रूर बताएं।

Written by: Aditya (Programming Sikho)