लोड हो रहा है...

CSS बॉक्स मॉडल

CSS बॉक्स मॉडल वेब डिज़ाइन का एक मूलभूत सिद्धांत है, जो यह निर्धारित करता है कि हर HTML एलिमेंट वेबपेज पर कैसे रेंडर होता है। हर एलिमेंट को एक आयताकार बॉक्स माना जाता है, जो चार मुख्य हिस्सों से बना होता है: कंटेंट (Content), पैडिंग (Padding), बॉर्डर (Border) और मार्जिन (Margin)। यह समझना महत्वपूर्ण है क्योंकि यह तय करता है कि एक एलिमेंट का कुल आकार क्या होगा और वह पेज पर अन्य एलिमेंट्स से कैसे इंटरैक्ट करेगा।
इसे एक घर बनाने की तरह समझें: कंटेंट घर का कमरा है, पैडिंग कमरे की खाली जगह, बॉर्डर दीवारें, और मार्जिन घर के चारों ओर का बगीचा। पोर्टफोलियो वेबसाइट में यह आपके प्रोजेक्ट कार्ड्स को साफ़-सुथरे ढंग से व्यवस्थित करता है। ब्लॉग में यह पैराग्राफ़ और इमेजेज़ के बीच सही दूरी बनाए रखता है। ई-कॉमर्स साइट्स पर, यह उत्पाद कार्ड्स को एक समान और प्रोफेशनल बनाता है। न्यूज़ साइट्स पर यह आर्टिकल्स को स्पष्ट रूप से अलग करता है और सोशल प्लेटफॉर्म पर फ़ीड आइटम्स को संतुलित रखता है।
इस ट्यूटोरियल में आप सीखेंगे कि बॉक्स मॉडल को कैसे कंट्रोल करें, एलिमेंट की वास्तविक चौड़ाई और ऊँचाई को सही से कैलकुलेट करें, पैडिंग और मार्जिन को ऑप्टिमाइज़ करें, और बेहतर, रेस्पॉन्सिव लेआउट बनाएँ। इसे समझना ऐसा है जैसे आप एक लाइब्रेरी को व्यवस्थित कर रहे हों – हर किताब (एलिमेंट) अपने सही स्थान पर होगी।

मूल उदाहरण

css

CSS Code

/* Basic CSS Box Model Example */
.box {
width: 200px;             /* content width */
height: 100px;            /* content height */
padding: 20px;            /* inner spacing */
border: 5px solid blue;   /* border around the box */
margin: 15px;             /* space to other elements */
background-color: lightgray; /* visualize the box */
}

ऊपर दिए गए कोड में .box क्लास बॉक्स मॉडल का एक बुनियादी और स्पष्ट उदाहरण है।

width और height एलिमेंट के कंटेंट एरिया को परिभाषित करते हैं। content-box डिफ़ॉल्ट मोड में, पैडिंग और बॉर्डर इन मापों में शामिल नहीं होते। इसका मतलब है कि एलिमेंट की वास्तविक चौड़ाई और ऊँचाई घोषित मानों से अधिक होगी।
padding (20px) कंटेंट और बॉर्डर के बीच का अंदरूनी स्पेस है। इसका उपयोग वास्तविक वेबसाइट्स जैसे ब्लॉग या पोर्टफोलियो में यह सुनिश्चित करने के लिए किया जाता है कि टेक्स्ट किनारों से चिपका न लगे।
border (5px solid blue) एलिमेंट के चारों ओर दिखाई देने वाला फ्रेम है। यह एलिमेंट को हाइलाइट करता है, लेकिन साथ ही इसकी कुल चौड़ाई और ऊँचाई को भी बढ़ाता है।
margin (15px) एलिमेंट और अन्य एलिमेंट्स के बीच का बाहरी स्पेस बनाता है। यह लेआउट को साफ़-सुथरा और पढ़ने में आसान बनाता है।
background-color डेवलपमेंट के दौरान बॉक्स के आकार और स्पेसिंग को विज़ुअलाइज़ करने में मदद करता है।
शुरुआती लोग अक्सर इस बात से भ्रमित होते हैं कि एलिमेंट की कुल चौड़ाई उनकी अपेक्षा से अधिक क्यों है। कारण यह है कि content-box मोड में कुल चौड़ाई = कंटेंट + 2×पैडिंग + 2×बॉर्डर। इसे समझना जटिल लेआउट्स और रेस्पॉन्सिव डिज़ाइनों को मैनेज करने के लिए आवश्यक है।

व्यावहारिक उदाहरण

css

CSS Code

/* Practical Box Model Example for a portfolio card */
.project-card {
width: 280px;
padding: 15px;
border: 2px solid #444;
margin: 20px;
background-color: #f9f9f9;
box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* adds subtle depth */
box-sizing: border-box; /* include padding and border in total size */
}

सर्वश्रेष्ठ प्रथाएँ और सामान्य गलतियाँ:
सर्वश्रेष्ठ प्रथाएँ:

मोबाइल-फर्स्ट डिज़ाइन: पहले छोटे स्क्रीन के लिए डिज़ाइन करें। पैडिंग और मार्जिन को रेस्पॉन्सिव रखें ताकि मोबाइल पर एलिमेंट्स न टकराएँ।
box-sizing: border-box का उपयोग: यह प्रॉपर्टी padding और border को width/height में शामिल कर देती है, जिससे कैलकुलेशन आसान और लेआउट स्थिर रहते हैं।
संगत स्पेसिंग सिस्टम: पैडिंग और मार्जिन के लिए समान मान या CSS वेरिएबल्स का उपयोग करें, ताकि साइट का डिज़ाइन साफ़ और मैनेजेबल रहे।
प्रदर्शन अनुकूलन: अनावश्यक नेस्टेड डिव्स और जटिल मार्जिन-ओवरराइड्स से बचें, क्योंकि यह रेंडरिंग को धीमा कर सकते हैं।
सामान्य गलतियाँ:
साइज़िंग कैलकुलेशन को नज़रअंदाज़ करना: पैडिंग और बॉर्डर जोड़ना भूल जाना जिससे कंटेनर ओवरफ्लो हो सकता है।
मार्जिन कोलैप्स को न समझना: वर्टिकल मार्जिन्स जुड़कर अप्रत्याशित गैप बना सकते हैं।
!important और इनलाइन स्टाइल्स का अत्यधिक उपयोग: कोड को कठिन और अस्थिर बनाता है।
रेस्पॉन्सिवनेस की कमी: फिक्स्ड पिक्सेल वैल्यूज़ छोटे स्क्रीन पर डिज़ाइन बिगाड़ सकती हैं।
डिबगिंग टिप: ब्राउज़र DevTools में बॉक्स मॉडल इंस्पेक्टर का उपयोग करें। यह कंटेंट, पैडिंग, बॉर्डर और मार्जिन को रंगों से अलग दिखाता है और लाइव एडजस्टमेंट आसान बनाता है।

📊 त्वरित संदर्भ

Property/Method	Description	Example
width	कंटेंट एरिया की चौड़ाई सेट करता है	width: 200px;
height	कंटेंट एरिया की ऊँचाई सेट करता है	height: 100px;
padding	कंटेंट और बॉर्डर के बीच का अंदरूनी स्पेस	padding: 20px;
border	एलिमेंट के चारों ओर का बॉर्डर	border: 2px solid black;
margin	अन्य एलिमेंट्स से बाहरी दूरी	margin: 15px;
box-sizing	कुल साइज़ कैलकुलेशन को नियंत्रित करता है	box-sizing: border-box;

सारांश और अगले कदम:
CSS बॉक्स मॉडल किसी भी वेब लेआउट की नींव है। अब आप जानते हैं कि कंटेंट, पैडिंग, बॉर्डर और मार्जिन कैसे मिलकर किसी एलिमेंट का कुल आकार और पोज़िशनिंग तय करते हैं। इस ज्ञान से आप साफ़, प्रोफेशनल और रेस्पॉन्सिव लेआउट बना सकते हैं, चाहे वह ब्लॉग हो, ई-कॉमर्स साइट या सोशल फ़ीड।
HTML स्ट्रक्चर के हर एलिमेंट को एक बॉक्स माना जाता है, और जावास्क्रिप्ट के साथ आप padding, margin या border को डायनामिक रूप से बदल सकते हैं।
अगले कदम के रूप में आप overflow, box-shadow, Flexbox और CSS Grid जैसे टॉपिक्स सीख सकते हैं। अभ्यास के लिए, एक छोटा पोर्टफोलियो बनाइए, पैडिंग और मार्जिन के अलग-अलग कॉम्बिनेशन आज़माइए और ब्राउज़र DevTools में बॉक्स मॉडल को विज़ुअलाइज़ करें। एक संगठित लाइब्रेरी की तरह, सही बॉक्स प्लेसमेंट साफ़ और उपयोगी डिज़ाइन सुनिश्चित करता है।

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपना ज्ञान परखें

व्यावहारिक प्रश्नों के साथ इस विषय की अपनी समझ का परीक्षण करें।

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी

भाषा