CSS फ्रेमवर्क उद्धरण
- पिछला पृष्ठ CSS लिस्ट
- अगला पृष्ठ CSS इनर पैडिंग
CSS बॉक्स मॉडल (Box Model) नियमित रूप से एलिमेंट बॉक्स को एलिमेंट सामग्री,इनर पैडिंग、बॉर्डर और माउन्टिंग के तरीके से.
CSS फ्रेमवर्क उद्धरण
एलिमेंट बॉक्स का सबसे अंदर का हिस्सा वास्तविक सामग्री है, जिसके चारों ओर इनर पैडिंग है. इनर पैडिंग द्वारा एलिमेंट का बैकग्राउंड प्रस्तुत किया जाता है. इनर पैडिंग के किनारे बॉर्डर है. बॉर्डर के बाहर बाह्य माउन्टिंग है, जो डिफ़ॉल्ट रूप से पारदर्शी है, इसलिए उसके पीछे के किसी भी एलिमेंट को अवरोध नहीं करता.
सूचना:बैकग्राउंड, सामग्री, इनर पैडिंग और बॉर्डर से बने क्षेत्र पर लागू किया जाता है.
इनर पैडिंग, बॉर्डर और माउन्टिंग वैकल्पिक हैं, डिफ़ॉल्ट मान शून्य है. लेकिन, कई एलिमेंट यूज़र एजेंट स्टाइलशीट द्वारा माउन्टिंग और इनर पैडिंग सेट किए जाते हैं. एलिमेंट के margin और padding को शून्य करके इन ब्राउज़र स्टाइलों को ओवरराइड किया जा सकता है. यह अलग-अलग किया जा सकता है, या सभी एलिमेंटों पर यूनिवर्सल सेलेक्टर का इस्तेमाल करके वही किया जा सकता है:
* {
margin: 0;
padding: 0;
}
CSS में, width और height सामग्री क्षेत्र की चौड़ाई और ऊंचाई को संदर्भित करते हैं. इनर पैडिंग, बॉर्डर और माउन्टिंग को बढ़ाने से सामग्री क्षेत्र का आकार प्रभावित नहीं होता, लेकिन एलिमेंट बॉक्स का कुल आकार बढ़ता है.
सोचा जाये कि बॉक्स के प्रत्येक किनारे पर 10 पिक्सल की माउन्टिंग और 5 पिक्सल की इनर पैडिंग है. यदि आप इस एलिमेंट बॉक्स को 100 पिक्सल का बनाना चाहते हैं, तो सामग्री की चौड़ाई को 70 पिक्सल के रूप में सेट करना चाहिए, यहाँ देखें:
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
सूचना:इनर पैडिंग, बॉर्डर और माउन्टिंग को एक एलिमेंट के सभी किनारों पर या अलग-अलग किनारों पर लागू किया जा सकता है.
सूचना:माउन्टिंग नकारात्मक मान हो सकती है और अनेक मौकों पर नकारात्मक माउन्टिंग का इस्तेमाल किया जाता है.
ब्राउज़र सहयोगिता
एक बार पृष्ठ के लिए उचित DTD सेट करने के बाद, अधिकांश ब्राउज़र उपरोक्त चित्र के अनुसार सामग्री को प्रस्तुत करेंगे. हालांकि, IE 5 और 6 का प्रस्तुतीकरण असही रूप से है. W3C के नियम के अनुसार, एलिमेंट के सामग्री के जगह का आकार width एट्रिब्यूट द्वारा निर्धारित होता है, जबकि सामग्री के चारों ओर की padding और border माने अलग तौर पर गिनाए जाते हैं. दुर्भाग्य से, IE5.X और 6 विचारधारा मोड में अपने अपने अस्टैंडर्ड मॉडल का इस्तेमाल करते हैं. इन ब्राउज़रों के width एट्रिब्यूट नहीं सामग्री की चौड़ाई है, वरन् सामग्री, इनर पैडिंग और बॉर्डर की चौड़ाई का योग है.
इस मसले को हल करने के तरीके हैं।लेकिन अभी बेहतर समाधान इस मसले को छोड़ना है।अर्थात, एलीमेंट को निर्दिष्ट चौड़ाई वाले इनर पैडिंग नहीं जोड़ना, बल्कि इनर पैडिंग या अवरीभाजन को एलीमेंट के पैर और संतति एलीमेंट में जोड़ने की कोशिश करें।
शब्दावली अनुवाद
- element : एलीमेंट।
- padding : इनर पैडिंग, भी इसे फ़ूल कहा जाता है।
- border : बॉर्डर।
- margin : अवरीभाजन, भी इसे खाली या खाली किनारा के रूप में अनुवाद किया जाता है।
codew3c में, हम padding और margin को एक साथ इनर पैडिंग और अवरीभाजन कहते हैं।बॉर्डर के अंदर का खाली स्थान इनर पैडिंग है, बॉर्डर के बाहर का खाली स्थान अवरीभाजन है, आसानी से याद रख सकते हैं:)
- पिछला पृष्ठ CSS लिस्ट
- अगला पृष्ठ CSS इनर पैडिंग
