CSS बॉक्स मॉडल का दृश्य
content-box और border-box को वास्तविक CSS पिक्सेल में तुलना करें। बड़े बॉक्स स्क्रॉल हो सकते हैं और शून्य सामग्री आकार शून्य रहता है।
CSS बॉक्स मॉडल का दृश्य
चित्र वास्तविक CSS पिक्सेल में है। बड़े बॉक्स देखने के लिए स्क्रॉल करें। चौड़ाई और ऊँचाई: 1–1,200; समान अंतर: 0–100 px।
- बाहरी अंतर
- सीमा की मोटाई
- भीतरी अंतर
- सामग्री का आकार
उपयोग कैसे करें
उपयोग कैसे करें
- चौड़ाई और ऊँचाई 1–1,200 px तथा समान बाहरी अंतर, सीमा और भीतरी अंतर 0–100 px रखें।
- सामग्री बॉक्स या सीमा बॉक्स चुनकर परतों और गणना के आकार देखें।
- CSS कॉपी करें या मान रीसेट करें। खाली या अमान्य मान परिणाम हटाते हैं और कॉपी रोकते हैं।
आकार के समीकरण
content-box: सामग्री=घोषित आकार; तत्व=घोषित आकार+2×(भीतरी अंतर+सीमा)। border-box: तत्व=max(घोषित आकार, 2×(भीतरी अंतर+सीमा)); सामग्री=max(0, घोषित आकार−2×(भीतरी अंतर+सीमा))। दोनों: बाहरी आकार=तत्व+2×बाहरी अंतर। चौड़ाई और ऊँचाई अलग गणना होती हैं।
न्यूनतम आकार और सीमाएँ
सभी मान भरे हुए, सीमित और निर्धारित सीमा में हों। सीमा बॉक्स में भीतरी अंतर और सीमा घोषित आकार से अधिक हों तो सामग्री शून्य और तत्व न्यूनतम घेराव का होता है। बाहरी अंतर तत्व के बाहर है।
चित्र का पैमाना
हर गणना पिक्सेल एक CSS पिक्सेल है; खिड़की में फिट करने के लिए छोटा नहीं होता। स्क्रॉल क्षेत्र 360 CSS पिक्सेल ऊँचा है। बड़े बॉक्स के लिए क्षैतिज या लंबवत स्क्रॉल करें। हर परत स्पष्ट content-box है, अतिरिक्त भीतरी अंतर या सामग्री का न्यूनतम आकार नहीं है। रंगों का अर्थ संकेत सूची में है।
अक्सर पूछे जाने वाले सवाल
आप यह भी जानना चाहेंगे
क्या चित्र फिट करने के लिए छोटा होता है?
नहीं। वास्तविक CSS पिक्सेल दिखते हैं; बड़ा चित्र स्क्रॉल करें। बताए गए आकार बिना पैमाना बदले CSS गणना के हैं।
क्या बाहरी अंतर तत्व को बड़ा करता है?
यह बाहर की जगह बढ़ाता है, तत्व का वास्तविक आकार नहीं। केवल समान अंतर का मॉडल है; बाहरी अंतर का विलय या सामग्री का स्वाभाविक आकार शामिल नहीं है।