HTML डॉक्यूमेंट में प्रत्येक एलिमेंट को CSS द्वारा एक आयताकार बॉक्स के रूप में माना जाता है। यह डिफ़ॉल्ट लेआउट स्कीम है और इसे हमारी आवश्यकताओं के अनुसार कस्टमाइज़ किया जा सकता है। एलिमेंट्स की पोजिशनिंग, उनका कंटेंट, और उनके आसपास के एलिमेंट्स CSS के बॉक्स मॉडल का पालन करके किए जाते हैं।
शुरुआत करते हैं, बॉक्स मॉडल के लेआउट के साथ जैसा कि निम्नलिखित इमेज में दिखाया गया है।
स्रोत: w3.org
कंटेंट (Content)
इसमें टेक्स्ट, इमेज या अन्य मीडिया कंटेंट के रूप में वास्तविक डेटा शामिल होता है। width और height प्रॉपर्टीज इस बॉक्स के आयामों को संशोधित करती हैं।
पैडिंग (Padding)
कंटेंट के बाहरी किनारे और उसके बॉर्डर के बीच की जगह को पैडिंग कहते हैं। इस बॉक्स को padding प्रॉपर्टी द्वारा रिसाइज़ किया जा सकता है। एज-स्पेसिफिक प्रॉपर्टीज जैसे padding-left, padding-bottom आदि कस्टम स्पेसिंग प्राप्त करने में मदद करती हैं।
बॉर्डर (Border)
पैडिंग के बाहरी किनारे और मार्जिन के आंतरिक किनारे के बीच की दूरी किसी एलिमेंट के बॉर्डर को परिभाषित करती है। डिफ़ॉल्ट रूप से, इसकी चौड़ाई 0 पर सेट होती है। border प्रॉपर्टी का उपयोग किसी एलिमेंट के बॉर्डर को परिभाषित करने के लिए किया जाता है। व्यक्तिगत एज को भी स्टाइल किया जा सकता है।
मार्जिन (Margin)
किसी एलिमेंट के बॉक्स और उसके आसपास के एलिमेंट्स के बॉक्स के बीच की जगह को मार्जिन के रूप में परिभाषित किया जाता है। यह पेज मार्जिन के समान है जिसे पेज के किनारे और उसके कंटेंट के बीच की जगह के रूप में परिभाषित किया जाता है। यह रंग में पारदर्शी होता है, पैडिंग के गुणों का अनुकरण करता है, सिवाय इसके कि यह एलिमेंट के बॉर्डर के बाहर के क्षेत्र को क्लियर करता है। पैडिंग की तरह, व्यक्तिगत एज को कस्टम मार्जिन के लिए परिभाषित किया जा सकता है।
उदाहरण
निम्नलिखित उदाहरण पर विचार करें:
<!DOCTYPE html> <html> <head> <style> div { margin: 25px; padding: 35px; width: 200px; background-color: lightseagreen; border: 20px dashed indianred; } </style> </head> <body> <div> Content demo box<br/> </div> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करता है:
यहां, हमने अपने CSS स्पेसिफिकेशन में <div> एलिमेंट का आकार परिभाषित किया है। इस एलिमेंट की कुल चौड़ाई 360px है जिसकी गणना निम्नानुसार की जाती है:
width + (left+right)padding + (left+right)border + (left+right)margin = 200 + (35+35) + (20+20) + (25+25) px = 360px
हालांकि ऐसा लग सकता है कि मार्जिन और पैडिंग केवल अनावश्यक जगह जोड़ते हैं और एलिमेंट की कुल चौड़ाई में जुड़ जाते हैं, लेकिन इसने वेबपेज को रिस्पॉन्सिव बनाने में विभिन्न अनुप्रयोग पाए हैं। बॉक्स मॉडल एलिमेंट्स को बेहतर तरीके से पोजिशन करने में मदद करता है।
दूसरा उदाहरण
निम्नलिखित उदाहरण CSS बॉक्स मॉडल को दर्शाते हैं:
<!DOCTYPE html> <html> <head> <style> div { margin: auto; padding: 35px; width: 80px; box-shadow: inset 0 0 22px indianred; border-radius: 50%; } div > div { padding: 0 0px 100px 0px; border-radius: 3%; box-shadow: inset 0 0 22px seagreen; } </style> </head> <body> <div> <div></div> </div> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
तीसरा उदाहरण
<!DOCTYPE html> <html> <head> <style> #demo { width: 350px; display: flex; float: left; border: 6px solid black; border-radius: 6%; } .d1 { margin-left: 20px; width: 150px; height: 80px; box-shadow: 0 0 0 4px mediumslateblue; box-sizing: border-box; border-radius: 36%; } .d2 { width: 150px; height: 80px; padding: 30px; box-shadow: 0 0 0 4px darkred; box-sizing: border-box; border-radius: 36%; } </style> </head> <body> <div id="demo"> <div class="d1"></div> <div class="d2"></div> </div> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
