HTML डॉक्यूमेंट में प्रत्येक एलिमेंट को ब्राउज़र द्वारा एक आयताकार बॉक्स के रूप में रेंडर किया जाता है। चौड़ाई, ऊंचाई, पैडिंग और मार्जिन एलिमेंट के अंदर और आसपास आवंटित स्थान को निर्धारित करते हैं। निम्नलिखित आरेख बॉक्स मॉडल अवधारणा को दर्शाता है:
स्रोत: w3.org
कंटेंट (सामग्री)
इसमें टेक्स्ट, इमेज या अन्य मीडिया कंटेंट के रूप में वास्तविक डेटा शामिल होता है। चौड़ाई और ऊंचाई प्रॉपर्टीज इस बॉक्स के डायमेंशन्स को संशोधित करती हैं।
पैडिंग
कंटेंट के बाहरी किनारे और उसके बॉर्डर के बीच का स्थान पैडिंग कहलाता है। इस बॉक्स को पैडिंग प्रॉपर्टी द्वारा रिसाइज किया जा सकता है। एज-स्पेसिफिक प्रॉपर्टीज जैसे padding-left, padding-bottom, आदि कस्टम स्पेसिंग प्राप्त करने में मदद करती हैं।
बॉर्डर
पैडिंग के बाहरी किनारे और मार्जिन के आंतरिक किनारे के बीच की दूरी एलिमेंट के बॉर्डर को परिभाषित करती है। डिफॉल्ट रूप से, इसकी चौड़ाई 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>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
