CSS में, वेब डिज़ाइन और लेआउट के संदर्भ में “Box Model” शब्द का प्रयोग किया जाता है। CSS Box Model मूलतः एक बॉक्स होता है जो प्रत्येक HTML Element को घेरे रहता है। प्रत्येक बॉक्स में चार भाग होते हैं:
नीचे दी गई इमेज CSS Box Model को दर्शाती है:
उपरोक्त Box Model मे “Content” के चारों तरफ का सफेद भाग पैडिंग है, गुलाबी क्षेत्र बॉर्डर है और गुलाबी क्षेत्र के चारों ओर का सफेद भाग मार्जिन है।
विभिन्न भागों की व्याख्या (अंदर से बाहर की ओर):
- Content – बॉक्स की सामग्री, जहाँ टेक्सट और चित्र दिखाई देते हैं।
- Padding – सामग्री के आसपास का क्षेत्र क्लीयर करता है। पैडिंग पारदर्शी होती है।
- Border – पैडिंग और सामग्री के चारों ओर एक बॉर्डर।
- Margin – बॉर्डर के बाहर का क्षेत्र साफ़ करता है। मार्जिन पारदर्शी होता है।
Box Model हमें Element के चारों ओर बॉर्डर जोड़ने और Elements के बीच स्थान निर्धारित करने की अनुमति देता है।
Example
Demonstration of the box model:
CSS Code
.div1{
border: 2px solid green;
}
.div2 {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
HTML Code
<div class="div1">
<div class="div2"><h2>This is Content</h2></div>
</div>
उपरोक्त कोड का आउटपुट निम्न प्रकार होगा –
This is Content
Width and Height of an Element
सभी ब्राउज़रों में किसी Element की चौड़ाई और ऊंचाई को सही ढंग से सेट करने के लिए, आपको यह जानना होगा कि बॉक्स मॉडल कैसे काम करता है।
Note – जब आप CSS के साथ किसी एलिमेंट की चौड़ाई और ऊँचाई के गुण सेट करते हैं, तो आप केवल कंटेंट एरिया की चौड़ाई और ऊँचाई सेट करते हैं। किसी एलिमेंट की कुल चौड़ाई और ऊँचाई की गणना करने के लिए, आपको पैडिंग और बॉर्डर भी शामिल करने होंगे।
Example
This <div> element will have a total width of 490px and a total height of 120px:
div {
width: 420px;
height: 50px;
padding: 25px;
border: 10px solid gray;
}
किसी Element कुल Width की गणना इस प्रकार की जानी चाहिए:
Total element width = width + left padding + right padding + left border + right border
किसी Element कुल Height की गणना इस प्रकार की जानी चाहिए:
Total element height = height + top padding + bottom padding + top border + bottom border