बॉक्स मॉडल के साथ अपना वेब पेज लेआउट कैसे व्यवस्थित करें

CSS मार्जिन , बॉर्डर , और पैडिंग गुणों का उपयोग किसी दिए गए HTML तत्व पर एक अनूठा प्रभाव बनाने के लिए किया जाता है। वे यह सुनिश्चित करने के लिए एक साथ काम करते हैं कि आपका वेब पेज व्यवस्थित और प्रस्तुत करने योग्य है।

इन तीन गुणों में से, सीमा संपत्ति अधिक परिचित लग सकती है क्योंकि इसे आमतौर पर वेब पेज पर आसानी से पहचाना जाता है। हालाँकि, यदि डेवलपर ने पैडिंग और मार्जिन गुणों को संपादित नहीं किया है, तो बॉर्डर प्रॉपर्टी का उपयोग करना उतना प्रस्तुत करने योग्य नहीं होगा जितना कि अधिकांश वेबसाइटों पर होता है।

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

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

CSS बॉक्स मॉडल अनिवार्य रूप से एक बॉक्स है जो प्रत्येक HTML तत्व को संलग्न करता है। बॉक्स मॉडल में चार परतें होती हैं (जैसा कि आप नीचे की छवि में देख सकते हैं), और प्रत्येक परत का एक अनूठा उद्देश्य होता है।

पहली परत बॉक्स मॉडल के केंद्र में पाई जाती है। यह प्रत्येक HTML तत्व को दी गई स्थिति है। ऑटो x ऑटो मान के ऊपर की छवि में वर्तमान में केंद्र की स्थिति से प्रदर्शित किया जा रहा है, लेकिन यह मान प्रत्येक HTML तत्व की चौड़ाई x ऊंचाई से बदल दिया जाएगा।

पैडिंग संपत्ति HTML तत्व और सीमा संपत्ति के बीच स्थित है, और मार्जिन संपत्ति सीमा संपत्ति के बाहरी तरफ स्थित है। पैडिंग और बॉर्डर के गुणों में आमतौर पर किसी दिए गए CSS तत्व के लिए दृश्यमान डिफ़ॉल्ट मान नहीं होते हैं। हालाँकि, कुछ HTML तत्वों पर एक डिफ़ॉल्ट मार्जिन गुण मान पाया जाता है, अर्थात् p तत्व- जिसका ऊपर और नीचे दोनों तरफ 16px का डिफ़ॉल्ट मान होता है।

CSS मार्जिन संपत्ति का उपयोग करना

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

मार्जिन संपत्ति की संरचना

 Selector {
margin: margin-top margin-right margin-left margin-bottom;
}

ऊपर दिया गया उदाहरण मार्जिन प्रॉपर्टी की मूल संरचना को दर्शाता है। मार्जिन प्रॉपर्टी को असाइन किए गए वैल्यू स्टैक में पहला मान शीर्ष को लक्षित करता है, दूसरा मान दाएं को लक्षित करता है, तीसरा बाएं को लक्षित करता है, और चौथा तत्व के निचले हिस्से को लक्षित करता है।

संबंधित: CSS चयनकर्ताओं का उपयोग करके वेब पेज के भाग को कैसे लक्षित करें

मार्जिन संपत्ति उदाहरण का उपयोग करना

 p{
margin: 20px 10px 20px 10px;
}

उपरोक्त कोड प्रभावी रूप से शीर्ष पर 20px, दाईं ओर 10px, नीचे 20px, और किसी विशिष्ट वेब पेज पर सभी p तत्वों के बाईं ओर 10px का मार्जिन प्रदान करता है। हालाँकि, वही प्रभाव जो ऊपर दिया गया कोड कम कोड के साथ प्राप्त किया जा सकता है:

 p{
margin: 20px 10px;
}

उपरोक्त कोड पिछले कोड स्निपेट के समान परिणाम देगा। मार्जिन प्रॉपर्टी को सौंपा गया पहला मान ऊपर और नीचे को लक्षित करेगा, और दूसरा मान वेब पेज पर सभी पी तत्वों के दाएं और बाएं किनारों को लक्षित करेगा।

यदि ऐसा कोई मामला है जहां HTML तत्व के सभी चार पक्षों को आवंटित किया जाने वाला मार्जिन समान है, तो आप इसे प्राप्त करने के लिए निम्न कोड का उपयोग कर सकते हैं:

 p{
margin: 20px;
}

उपरोक्त कोड वेब पेज पर p तत्वों के सभी चार पक्षों को 20px का मार्जिन प्रदान करता है।

CSS बॉर्डर प्रॉपर्टी को अनपैक करना

CSS बॉक्स मॉडल में, सीमा संपत्ति तीसरी परत है। मार्जिन की तरह, सीमा संपत्ति में कई उप-गुण हैं जिनका उपयोग आप स्टैक वैल्यू में कर सकते हैं। लेकिन, मार्जिन संपत्ति के विपरीत, सीमा संपत्ति के सही ढंग से कार्य करने के लिए सभी सीमा उप-गुणों को उपस्थित होने की आवश्यकता नहीं है। केवल एक ही संपत्ति है जिसे उपस्थित होने की आवश्यकता है: सीमा-शैली की संपत्ति।

मूल सीमा संपत्ति संरचना उदाहरण

 Selector{
border: border-style;
}

उपरोक्त उदाहरण में सीमा-शैली की संपत्ति कई मूल्यों में से एक का रूप ले सकती है। उदाहरण के लिए, यदि आप अपने वेब पेज पर सभी अनुच्छेदों के चारों ओर एक ठोस सीमा चाहते हैं, तो निम्न कोड मदद कर सकता है:

 p{
border: solid;
}

सीमा संपत्ति भी एक डेवलपर को निम्नलिखित चार उप-गुणों के साथ एक HTML तत्व के विशिष्ट पक्षों को लक्षित करने की अनुमति देती है:

  • बॉर्डर-बायां
  • बॉर्डर-दायां
  • बॉर्डर-शीर्ष
  • सीमा-नीचे

यदि कभी ऐसा कोई उदाहरण होता है जब आपको किसी तत्व के केवल एक तरफ सीमा लगाने की आवश्यकता होती है, तो आप उपरोक्त सूची से उपयुक्त उप-संपत्ति का उपयोग कर सकते हैं।

सीमा-शैली की संपत्ति को खोलना

हालांकि यह हमेशा दिखाई नहीं देता है, प्रत्येक HTML तत्व सीमा संपत्ति से घिरा होता है। कुछ मामलों में सीमा संपत्ति को देखने में आपकी अक्षमता इसलिए है क्योंकि सीमा-शैली संपत्ति का डिफ़ॉल्ट मान कोई नहीं है। आप सीमा-शैली की संपत्ति के लिए कई अलग अलग मान निर्दिष्ट कर सकते हैं, जिनमें से कुछ अधिक लोकप्रिय हैं:

  • ठोस
  • दोहरा
  • छितराया हुआ
  • पानी का छींटा

एक स्टैक मान के साथ सीमा संपत्ति का उपयोग करना

एक विशिष्ट परिणाम प्राप्त करने के लिए सीमा संपत्ति को तीन मान निर्दिष्ट किए जा सकते हैं। ये मान हैं सीमा-चौड़ाई , सीमा-शैली , और सीमा-रंग गुण। इसलिए, यदि आप 2px की चौड़ाई वाले अनुच्छेद के चारों ओर एक ठोस लाल बॉर्डर बनाना चाहते हैं, तो निम्न कोड इसे पूरा करेगा:

 p{
border: 2px solid red;
}

आप उपरोक्त उदाहरण में सीमा संपत्ति को उप-संपत्ति के साथ उपयुक्त पक्ष को लक्षित करके एक तत्व के एक तरफ स्टैक मान का उपयोग कर सकते हैं। उदाहरण के लिए, यदि आप उपरोक्त समान स्टैक मान वाले सभी अनुच्छेदों के केवल बाईं ओर लक्षित करना चाहते हैं, तो आप ऊपर दिए गए उदाहरण में "बॉर्डर" को "बॉर्डर-लेफ्ट" प्रॉपर्टी से बदल सकते हैं।

CSS पैडिंग प्रॉपर्टी का उपयोग करना

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

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

कोड के निम्नलिखित तीन सेट वेब पेज पर सभी p तत्वों पर समान परिणाम देंगे।

चार पैडिंग मानों का उपयोग करना

 p{
padding: 20px 20px 20px 20px;
}

दो पैडिंग मानों का उपयोग करना

 p{
padding: 20px 20px;
}

एक पैडिंग मान का उपयोग करना

 p{
padding: 20px 20px;
}

CSS बॉक्स मॉडल का उपयोग करना

बॉर्डर , मार्जिन और पैडिंग गुणों का उपयोग करने से आपको अपने वेब पेज को व्यवस्थित करने में मदद मिलेगी, चाहे वह किसी भी तरह का पेज क्यों न हो। यहां उन्हें अग्रानुक्रम में उपयोग करने का तरीका बताया गया है:

मूल HTML दस्तावेज़ उदाहरण

 <!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Box Model</title>
</head>
<body>
<div class="box">
<h1>Heading One</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Impedit rem recusandae id est. Rem, quod odio. Doloremque nemo libero,
fuga suscipit dignissimos soluta iusto ullam ducimus rerum labore necessitatibus facilis.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Impedit rem recusandae id est. Rem, quod odio. Doloremque nemo libero,
fuga suscipit dignissimos soluta iusto ullam ducimus rerum labore necessitatibus facilis.
</p>
</div>
<div class="box">
<h1>Heading Two</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Impedit rem recusandae id est. Rem, quod odio. Doloremque nemo libero,
fuga suscipit dignissimos soluta iusto ullam ducimus rerum labore necessitatibus facilis.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Impedit rem recusandae id est. Rem, quod odio. Doloremque nemo libero,
fuga suscipit dignissimos soluta iusto ullam ducimus rerum labore necessitatibus facilis.
</p>
</div>
</body>
</html>

संबंधित: गुणवत्ता HTML कोडिंग उदाहरणों के लिए सर्वश्रेष्ठ साइटें

उपरोक्त कोड ब्राउज़र में निम्न आउटपुट उत्पन्न करेगा:

ऊपर दी गई छवि दो div तत्वों को प्रदर्शित करती है, जिनमें से प्रत्येक में एक शीर्षक और एक पैराग्राफ होता है। जैसा कि आप नीचे दिए गए बॉक्स मॉडल में देख सकते हैं, प्रत्येक div तत्व का मार्जिन , बॉर्डर और पैडिंग 0px, चौड़ाई 1042px और ऊंचाई 112.438px है।

सीमा संपत्ति का उपयोग करने से पृष्ठ पर क्या हो रहा है, इसका स्पष्ट परिप्रेक्ष्य मिलता है।

सीमा संपत्ति का उपयोग करना

 .box{
border: solid;
}

ऊपर दिए गए CSS कोड का उपयोग करने से आपके ब्राउज़र में निम्न आउटपुट उत्पन्न होगा:

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

जैसा कि आप ऊपर दिए गए बॉक्स मॉडल से देख सकते हैं, मार्जिन प्रॉपर्टी बॉर्डर के बाहरी तरफ है। इसलिए, आप इसका उपयोग दो स्पर्श करने वाले div तत्वों के बीच कुछ जगह बनाने के लिए कर सकते हैं।

मार्जिन संपत्ति का उपयोग करना

 .box{
border: solid;
margin: 20px;
}

ऊपर दिए गए कोड के साथ मार्जिन पेश करने से आपके ब्राउज़र में निम्न आउटपुट तैयार होगा:

यह थोड़ा बेहतर है, है ना? Div तत्वों के बीच पर्याप्त जगह है। जैसा कि आप नीचे दिए गए बॉक्स मॉडल में देख सकते हैं, प्रत्येक div तत्व के सभी पक्षों में अब 20px का मार्जिन है।

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

पैडिंग प्रॉपर्टी का उपयोग करना

 .box{
border: solid;
margin: 20px;
padding: 10px;
}

उपरोक्त कोड आपके ब्राउज़र में निम्न आउटपुट उत्पन्न करेगा:

जैसा कि आप ऊपर की छवि से देख सकते हैं, सीमा के भीतर का पाठ अब पैडिंग गुण के कारण किनारों से दूर चला गया है। नीचे दिए गए बॉक्स मॉडल से पता चलता है कि बॉक्स मॉडल की सभी परतें अब उपयोग में हैं।

पैडिंग प्रॉपर्टी का उपयोग करके बॉक्स मॉडल CSS गुणों के साथ प्रयोग

अब आपको बॉक्स मॉडल की समझ है और एक विशिष्ट परिणाम प्राप्त करने के लिए इसके भीतर प्रत्येक तत्व एक साथ कैसे काम करता है। आप सीमा संपत्ति के लिए एक स्टैक मान निर्दिष्ट करने और सीमा रंग को लाल रंग में बदलने का प्रयास कर सकते हैं, या आप सीमा संपत्ति को इसकी सीमा-बाएं उप-संपत्ति से बदल सकते हैं और देख सकते हैं कि क्या होता है।

आपके लिए एक्सप्लोर करने के लिए कई अन्य सीएसएस गुण हैं, और सीएसएस चीट शीट के साथ, आप उनमें से प्रत्येक के साथ प्रयोग कर सकते हैं।