इस अध्याय में, आप CSS के बॉक्स मॉडल के बारे में जानेंगे, जो वेब पेजों के लेआउट और डिजाइन को समझने के लिए मौलिक है। हम बॉक्स मॉडल के घटकों को कवर करेंगे, जिनमें मार्जिन, पैडिंग, और बॉर्डर शामिल हैं। इसके अतिरिक्त, आप बॉक्स साइजिंग के बारे में जानेंगे और इन प्रॉपर्टीज़ का प्रभावी ढंग से उपयोग करके अच्छे संरचित और दृश्यात्मक रूप से आकर्षक वेब पेज कैसे बना सकते हैं, यह सीखेंगे। इस अध्याय के अंत तक, आपके पास बॉक्स मॉडल की संपूर्ण समझ होगी और आप इसे अपने वेब प्रोजेक्ट्स में कैसे लागू कर सकते हैं, यह जानेंगे। चलिए, बॉक्स मॉडल की इस रोमांचक यात्रा की शुरुआत करते हैं।
बॉक्स मॉडल का परिचय (Introduction to Box Model)
बॉक्स मॉडल का महत्व (Importance of Box Model)
बॉक्स मॉडल CSS का एक महत्वपूर्ण सिद्धांत है जो वेब पेज के हर HTML एलिमेंट को एक बॉक्स के रूप में देखता है। यह मॉडल हमें एलिमेंट्स के चारों ओर मार्जिन, बॉर्डर, पैडिंग और सामग्री को समझने और नियंत्रित करने की अनुमति देता है। बॉक्स मॉडल का सही उपयोग करने से आप वेब पेज के लेआउट को अधिक सटीकता और लचीलापन के साथ डिज़ाइन कर सकते हैं।
बॉक्स मॉडल के घटक (Components of Box Model)
बॉक्स मॉडल चार प्रमुख घटकों से मिलकर बना होता है:
- कंटेंट (Content): यह वह क्षेत्र है जहां टेक्स्ट और चित्र स्थित होते हैं।
- पैडिंग (Padding): यह कंटेंट और बॉर्डर के बीच का खाली स्थान है।
- बॉर्डर (Border): यह पैडिंग और मार्जिन के बीच की लाइन है जो बॉक्स को घेरती है।
- मार्जिन (Margin): यह बॉक्स के बाहर का खाली स्थान है, जो बॉक्स को अन्य एलिमेंट्स से अलग करता है।
बॉक्स मॉडल का उपयोग (Using Box Model)
बॉक्स मॉडल का उपयोग करके आप किसी एलिमेंट के चारों ओर के क्षेत्र को नियंत्रित कर सकते हैं। इसका उपयोग करते समय, आपको ध्यान रखना होगा कि कैसे मार्जिन, पैडिंग, और बॉर्डर का आकार कंटेंट के आकार को प्रभावित करता है। उदाहरण के लिए, अगर आप किसी बॉक्स के चारों ओर पैडिंग और बॉर्डर जोड़ते हैं, तो यह बॉक्स का कुल आकार बढ़ा देगा।
उदाहरण:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>बॉक्स मॉडल का उदाहरण</title>
<style>
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 15px;
background-color: lightgray;
}
</style>
</head>
<body>
<div class="box">
यह एक बॉक्स मॉडल का उदाहरण है।
</div>
</body>
</html>इस उदाहरण में, .box क्लास के लिए 200px चौड़ाई, 20px पैडिंग, 5px बॉर्डर, और 15px मार्जिन सेट किया गया है। इस प्रकार, आप देख सकते हैं कि कैसे बॉक्स मॉडल के घटक मिलकर कुल बॉक्स का आकार निर्धारित करते हैं।
बॉक्स मॉडल का सही तरीके से उपयोग करके आप अपने वेब पेज के लेआउट और डिजाइन को बेहतर बना सकते हैं। अगले सेक्शन में, हम मार्जिन, पैडिंग और बॉर्डर के बारे में विस्तार से जानेंगे।
मार्जिन, पैडिंग और बॉर्डर (Margin, Padding, and Border)
मार्जिन का परिचय (Introduction to Margin)
मार्जिन किसी एलिमेंट के बॉक्स और उसके आस-पास के अन्य एलिमेंट्स के बीच की दूरी को सेट करता है। यह बॉक्स के बाहर की खाली जगह होती है, जो इसे अन्य एलिमेंट्स से अलग करती है। मार्जिन को चार दिशाओं (ऊपर, नीचे, बाएं, और दाएं) के लिए अलग-अलग सेट किया जा सकता है या सभी दिशाओं के लिए एक ही मान दिया जा सकता है।
उदाहरण:
.box {
margin: 20px; /* सभी दिशाओं के लिए 20px */
}
.box {
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px; /* हर दिशा के लिए अलग मान */
}पैडिंग का परिचय (Introduction to Padding)
पैडिंग किसी एलिमेंट के कंटेंट और बॉर्डर के बीच की दूरी को सेट करता है। यह कंटेंट के चारों ओर की खाली जगह होती है, जो इसे बॉर्डर से अलग करती है। पैडिंग को भी चार दिशाओं (ऊपर, नीचे, बाएं, और दाएं) के लिए अलग-अलग सेट किया जा सकता है या सभी दिशाओं के लिए एक ही मान दिया जा सकता है।
उदाहरण:
.box {
padding: 20px; /* सभी दिशाओं के लिए 20px */
}
.box {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 25px; /* हर दिशा के लिए अलग मान */
}बॉर्डर का परिचय (Introduction to Border)
बॉर्डर किसी एलिमेंट के पैडिंग और मार्जिन के बीच की लाइन होती है। यह बॉक्स को घेरती है और इसे विभिन्न शैलियों (जैसे ठोस, डैश्ड, डॉटेड), चौड़ाई, और रंग के साथ सेट किया जा सकता है।
उदाहरण:
.box {
border: 2px solid black; /* 2px चौड़ाई, ठोस शैली, काला रंग */
}
.box {
border-top: 5px dashed red;
border-right: 3px dotted blue;
border-bottom: 4px solid green;
border-left: 2px double yellow; /* हर दिशा के लिए अलग शैली, चौड़ाई, और रंग */
}मार्जिन, पैडिंग और बॉर्डर का उपयोग (Using Margin, Padding, and Border)
मार्जिन, पैडिंग और बॉर्डर का सही उपयोग करके आप वेब पेज के लेआउट और डिजाइन को बेहतर बना सकते हैं। इन प्रॉपर्टीज़ का उपयोग करके आप एलिमेंट्स के बीच की दूरी, कंटेंट के चारों ओर की खाली जगह, और बॉक्स के चारों ओर की लाइन को नियंत्रित कर सकते हैं।
उदाहरण:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>मार्जिन, पैडिंग और बॉर्डर का उदाहरण</title>
<style>
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 15px;
background-color: lightgray;
}
</style>
</head>
<body>
<div class="box">
यह एक बॉक्स है जिसमें मार्जिन, पैडिंग और बॉर्डर का उपयोग किया गया है।
</div>
</body>
</html>
इस उदाहरण में, .box क्लास के लिए 200px चौड़ाई, 20px पैडिंग, 5px बॉर्डर, और 15px मार्जिन सेट किया गया है। इस प्रकार, आप देख सकते हैं कि कैसे मार्जिन, पैडिंग और बॉर्डर का उपयोग करके एक बॉक्स का कुल आकार निर्धारित किया जाता है।
इन अवधारणाओं को समझने और सही तरीके से उपयोग करने से आप अपने वेब पेज के लेआउट को अधिक सटीकता और लचीलापन के साथ डिज़ाइन कर सकते हैं। अगले सेक्शन में, हम बॉक्स साइजिंग के बारे में जानेंगे।
बॉक्स साइजिंग (Box Sizing)
बॉक्स साइजिंग का परिचय (Introduction to Box Sizing)
बॉक्स साइजिंग CSS का एक महत्वपूर्ण प्रॉपर्टी है जो यह निर्धारित करती है कि किसी एलिमेंट की कुल चौड़ाई और ऊंचाई कैसे गणना की जाएगी। सामान्यतः, जब आप किसी एलिमेंट की चौड़ाई और ऊंचाई सेट करते हैं, तो उसमें पैडिंग और बॉर्डर को भी शामिल किया जाता है, जिससे कुल आकार बढ़ जाता है। बॉक्स साइजिंग का उपयोग करके, आप यह नियंत्रित कर सकते हैं कि पैडिंग और बॉर्डर को कैसे गणना में शामिल किया जाए।
बॉक्स साइजिंग के प्रकार (Types of Box Sizing)
बॉक्स साइजिंग के दो मुख्य प्रकार हैं:
- content-box: यह डिफ़ॉल्ट बॉक्स साइजिंग है। इसमें केवल कंटेंट की चौड़ाई और ऊंचाई शामिल होती है, जबकि पैडिंग और बॉर्डर को कुल आकार में जोड़ा जाता है।
.box {
box-sizing: content-box;
}- border-box: इसमें कंटेंट की चौड़ाई और ऊंचाई के साथ पैडिंग और बॉर्डर को भी शामिल किया जाता है। यह सेटिंग एलिमेंट की कुल चौड़ाई और ऊंचाई को निश्चित रखती है।
.box {
box-sizing: border-box;
}बॉक्स साइजिंग का उपयोग (Using Box Sizing)
बॉक्स साइजिंग का सही उपयोग करने से आप अपने वेब पेज के लेआउट को अधिक स्थिर और पूर्वानुमेय बना सकते हैं। border-box बॉक्स साइजिंग का उपयोग अक्सर किया जाता है क्योंकि यह एलिमेंट की कुल चौड़ाई और ऊंचाई को निश्चित रखता है, चाहे उसमें कितनी भी पैडिंग या बॉर्डर हो।
उदाहरण:
/* सभी एलिमेंट्स के लिए बॉक्स साइजिंग सेट करना */
*,
*::before,
*::after {
box-sizing: border-box;
}उदाहरण (Examples)
नीचे दिए गए उदाहरणों के माध्यम से हम देखेंगे कि बॉक्स साइजिंग का उपयोग कैसे किया जाता है।
उदाहरण 1: content-box (डिफ़ॉल्ट)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>content-box का उदाहरण</title>
<style>
.content-box {
width: 200px;
padding: 20px;
border: 5px solid black;
box-sizing: content-box; /* डिफ़ॉल्ट बॉक्स साइजिंग */
background-color: lightblue;
}
</style>
</head>
<body>
<div class="content-box">
यह content-box का उदाहरण है।
</div>
</body>
</html>उदाहरण 2: border-box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>border-box का उदाहरण</title>
<style>
.border-box {
width: 200px;
padding: 20px;
border: 5px solid black;
box-sizing: border-box; /* border-box बॉक्स साइजिंग */
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="border-box">
यह border-box का उदाहरण है।
</div>
</body>
</html>इन उदाहरणों में, आप देख सकते हैं कि कैसे content-box और border-box बॉक्स साइजिंग सेटिंग्स एलिमेंट की कुल चौड़ाई और ऊंचाई को प्रभावित करती हैं। content-box में, पैडिंग और बॉर्डर को कुल चौड़ाई और ऊंचाई में जोड़ा जाता है, जबकि border-box में, पैडिंग और बॉर्डर एलिमेंट की सेट चौड़ाई और ऊंचाई के भीतर ही रहते हैं।
बॉक्स साइजिंग का सही उपयोग आपके वेब पेज के लेआउट को अधिक स्थिर और पूर्वानुमेय बनाता है, जिससे आपके डिजाइन को नियंत्रित और बनाए रखना आसान हो जाता है।
