सीएसएस बॉक्स मॉडल को समझना

HTML दस्तावेज़ में प्रत्येक तत्व को CSS द्वारा एक आयताकार बॉक्स के रूप में माना जाता है। यह डिफ़ॉल्ट लेआउट योजना है और इसे हमारी आवश्यकताओं के अनुसार अनुकूलित किया जा सकता है। तत्वों, उनकी सामग्री और उनके आस-पास के तत्वों की स्थिति सीएसएस के बॉक्स मॉडल के अनुसार की जाती है।

आरंभ करने के लिए, आइए बॉक्स मॉडल के लेआउट के साथ शुरू करें जैसा कि निम्न छवि में दिखाया गया है।

स्रोत:w3.org

सामग्री

इसमें टेक्स्ट, इमेज या अन्य मीडिया सामग्री के रूप में वास्तविक डेटा शामिल है। चौड़ाई और ऊंचाई के गुण इस बॉक्स के आयामों को संशोधित करते हैं।

पैडिंग

सामग्री के बाहरी किनारे और उसकी सीमा के बीच का स्थान पैडिंग को संदर्भित करता है। इस बॉक्स को पैडिंग प्रॉपर्टी द्वारा आकार दिया जा सकता है। किनारे-विशिष्ट गुण जैसे पैडिंग-लेफ्ट, पैडिंग-बॉटम, आदि कस्टम स्पेसिंग प्राप्त करने में मदद करते हैं।

सीमा

पैडिंग के बाहरी किनारे और मार्जिन के अंदरूनी किनारे के बीच की दूरी एक तत्व की सीमा को परिभाषित करती है। डिफ़ॉल्ट रूप से, इसकी चौड़ाई 0 पर सेट होती है। सीमा गुण का उपयोग किसी तत्व की सीमा को परिभाषित करने के लिए किया जाता है। अलग-अलग किनारों को भी स्टाइल किया जा सकता है।

मार्जिन

किसी तत्व के बॉक्स और उसके आस-पास के तत्वों के बॉक्स के बीच की जगह को मार्जिन के रूप में परिभाषित किया गया है। यह पृष्ठ मार्जिन के समान है जिसे पृष्ठ के किनारे और उसकी सामग्री के बीच की जगह के रूप में परिभाषित किया गया है। यह रंग में पारदर्शी है, पैडिंग के गुणों का अनुकरण करता है, सिवाय इसके कि यह तत्व की सीमा के बाहर के क्षेत्र को साफ करता है। पैडिंग की तरह, अलग-अलग किनारों को एक कस्टम मार्जिन के रूप में परिभाषित किया जा सकता है।

उदाहरण

निम्नलिखित उदाहरण पर विचार करें -

कंटेंट डेमो बॉक्स

आउटपुट

यह निम्न आउटपुट उत्पन्न करता है -

यहां, हमने इसके CSS विनिर्देश में