CSS बॉक्स मॉडल | CSS Box Model क्या है?

CSS बॉक्स मॉडल

वेब लेआउट की नींव - मार्जिन, बॉर्डर, पैडिंग और कंटेंट को पूरी तरह समझें

बॉक्स मॉडल क्या है?

CSS बॉक्स मॉडल वेब डिज़ाइन का मूलभूत अवधारणा है जो प्रत्येक HTML एलिमेंट को एक आयताकार बॉक्स के रूप में परिभाषित करता है। यह बॉक्स चार मुख्य भागों से मिलकर बना होता है:

Content (सामग्री)

1. Content (सामग्री)

वास्तविक सामग्री जैसे टेक्स्ट, इमेज या अन्य एलिमेंट्स। इसका आकार width और height प्रॉपर्टीज द्वारा नियंत्रित होता है।

width: 300px; height: 200px;

2. Padding (भीतरी रिक्त स्थान)

कंटेंट और बॉर्डर के बीच की जगह। यह बैकग्राउंड कलर/इमेज को दिखाती है।

padding: 20px; /* सभी ओर */ padding: 10px 20px; /* ऊपर-नीचे, बाएं-दाएं */ padding: 5px 10px 15px 20px; /* टॉप, राइट, बॉटम, लेफ्ट */

3. Border (किनारा)

पैडिंग और मार्जिन के बीच की रेखा। इसे स्टाइल, चौड़ाई और रंग दिया जा सकता है।

border: 2px solid #000; /* शॉर्टहैंड */ border-width: 2px; border-style: solid; border-color: #000;

4. Margin (बाहरी रिक्त स्थान)

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

margin: 20px; /* सभी ओर */ margin: 0 auto; /* केंद्र में संरेखित */ margin-top: 10px;

बॉक्स का कुल आकार कैसे निकालें?

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

div { width: 300px; padding: 20px; border: 5px solid black; margin: 30px; } /* कुल चौड़ाई = width + padding-left + padding-right + border-left + border-right */ /* = 300px + 20px + 20px + 5px + 5px = 350px */ /* कुल ऊंचाई = height + padding-top + padding-bottom + border-top + border-bottom */

महत्वपूर्ण: CSS3 के box-sizing प्रॉपर्टी से आप इस व्यवहार को बदल सकते हैं। box-sizing: border-box सेट करने पर पैडिंग और बॉर्डर width/height में शामिल हो जाते हैं।

प्रॉपर्टी content-box (डिफ़ॉल्ट) border-box width: 300px कंटेंट की चौड़ाई = 300px कंटेंट + पैडिंग + बॉर्डर = 300px padding: 20px कुल चौड़ाई में जुड़ता है कंटेंट स्पेस कम हो जाता है border: 5px कुल चौड़ाई में जुड़ता है कंटेंट स्पेस कम हो जाता है

बॉक्स मॉडल के व्यावहारिक उपयोग

बॉक्स मॉडल का उचित ज्ञान वेब लेआउट डिज़ाइन करने में मदद करता है:

1. स्पेसिंग और अलाइनमेंट

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

.card { padding: 20px; /* आंतरिक स्पेस */ margin-bottom: 30px; /* बाहरी स्पेस */ }

2. बटन और इनपुट स्टाइलिंग

पैडिंग और बॉर्डर से इंटरैक्टिव एलिमेंट्स को आकर्षक बनाएं:

button { padding: 10px 20px; border: 2px solid #3498db; border-radius: 5px; }

3. कार्ड डिज़ाइन

बॉक्स मॉडल प्रॉपर्टीज का उपयोग करके आधुनिक कार्ड बनाएं:

.card { width: 300px; padding: 25px; border: 1px solid #eee; border-radius: 10px; margin: 20px; box-shadow: 0 3px 10px rgba(0,0,0,0.1); }

4. रिस्पॉन्सिव लेआउट

प्रतिशत-आधारित width और उचित padding/margin से रिस्पॉन्सिव डिज़ाइन बनाएं:

.container { width: 90%; max-width: 1200px; margin: 0 auto; /* केंद्र में संरेखित */ padding: 20px; }

बॉक्स मॉडल के सर्वोत्तम अभ्यास

• box-sizing: border-box का उपयोग: सभी एलिमेंट्स पर * { box-sizing: border-box; } लगाएं
• मार्जिन कॉलैप्सिंग: दो वर्टिकल मार्जिन्स के बीच की दूरी उनमें से बड़े मार्जिन के बराबर होती है
• नकारात्मक मार्जिन: कभी-कभी विशेष लेआउट के लिए उपयोगी, लेकिन सावधानी से प्रयोग करें
• डिबगिंग: ब्राउज़र डेवलपर टूल्स से बॉक्स मॉडल की जांच करें (Chrome DevTools में Elements > Computed)

सामान्य समस्याएं:

• अनचाहे स्क्रॉलबार (कुल width 100% से अधिक होने पर)
• मार्जिन कॉलैप्सिंग के कारण अनपेक्षित स्पेसिंग
• पैडिंग/बॉर्डर के कारण लेआउट टूटना
• फ्लोट एलिमेंट्स के साथ मार्जिन समस्याएं