HTML दस्तावेज़ में प्रत्येक तत्व ब्राउज़र द्वारा एक आयताकार बॉक्स के रूप में प्रस्तुत किया जाता है। चौड़ाई, ऊंचाई, पैडिंग और मार्जिन तत्व के चारों ओर आवंटित स्थान निर्धारित करते हैं। निम्नलिखित आरेख बॉक्स मॉडल अवधारणा को दर्शाता है -
स्रोत:w3.org
सामग्री
इसमें टेक्स्ट, इमेज या अन्य मीडिया सामग्री के रूप में वास्तविक डेटा शामिल है। चौड़ाई और ऊंचाई के गुण इस बॉक्स के आयामों को संशोधित करते हैं।
पैडिंग
सामग्री के बाहरी किनारे और उसकी सीमा के बीच का स्थान पैडिंग को संदर्भित करता है। इस बॉक्स को पैडिंग प्रॉपर्टी द्वारा आकार दिया जा सकता है। किनारे-विशिष्ट गुण जैसे पैडिंग-लेफ्ट, पैडिंग-बॉटम, आदि कस्टम स्पेसिंग प्राप्त करने में मदद करते हैं।
सीमा
पैडिंग के बाहरी किनारे और मार्जिन के अंदरूनी किनारे के बीच की दूरी एक तत्व की सीमा को परिभाषित करती है। डिफ़ॉल्ट रूप से, इसकी चौड़ाई 0 पर सेट होती है। सीमा गुण का उपयोग किसी तत्व की सीमा को परिभाषित करने के लिए किया जाता है। अलग-अलग किनारों को भी स्टाइल किया जा सकता है।
मार्जिन
किसी तत्व के बॉक्स और उसके आस-पास के तत्वों के बॉक्स के बीच की जगह को मार्जिन के रूप में परिभाषित किया गया है। यह पेज मार्जिन के समान है जिसे पेज के किनारे और उसकी सामग्री के बीच की जगह के रूप में परिभाषित किया गया है। यह रंग में पारदर्शी है, पैडिंग के गुणों का अनुकरण करता है, सिवाय इसके कि यह तत्व की सीमा के बाहर के क्षेत्र को साफ करता है। पैडिंग की तरह, अलग-अलग किनारों को एक कस्टम मार्जिन के रूप में परिभाषित किया जा सकता है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
body * {
outline: solid;
}
#demo {
margin: auto;
width: 50%;
padding: 1em;
border: 1px outset;
display: flex;
box-shadow: inset 0 0 15px mediumvioletred;
box-sizing: border-box;
}
#demo div {
padding: 2em;
box-shadow: inset 0 0 9px orange;
}
</style>
</head>
<body>
<div id="demo">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html> आउटपुट
यह निम्न आउटपुट देता है -
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
body * {
outline: thin dotted;
}
#demo {
margin: auto;
width: 120px;
height: 120px;
padding: 1em;
border: 1px outset;
display: flex;
box-shadow: inset 0 0 15px indianred;
}
#demo div {
width: 40px;
height: 40px;
}
div:nth-child(odd) {
border: inset lightgreen;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
}
div:nth-child(even) {
border: inset lightblue;
padding: 0.5em;
}
</style>
</head>
<body>
<div id="demo">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html> आउटपुट
यह निम्न आउटपुट देता है -
