बॉक्स मॉडल
एक बार जब आप CSS के साथ चीजों को स्पेस करना शुरू करते हैं, तो आप उसी पहेली का सामना करते हैं जो सभी को करना पड़ता है: आप एक width सेट करते हैं, कुछ पैडिंग जोड़ते हैं, और एलिमेंट आपने जितना पूछा था उससे चौड़ा निकलता है। दो पैराग्राफ संख्याओं से कहीं अधिक पास बैठते हैं। यह कोई बग नहीं है। यह बॉक्स मॉडल है, नियमों का वह समूह जो तय करता है कि हर एलिमेंट कितनी जगह लेता है, और एक बार जब आप इसे चित्रित कर सकते हैं, तो आपकी अधिकांश स्पेसिंग चिंताएं आश्चर्य नहीं रह जाती हैं।
हर एलिमेंट एक बॉक्स है
CSS पृष्ठ पर हर एलिमेंट को एक आयत के रूप में मानता है, यहां तक कि एक शब्द या लिंक भी। वह आयत अंदर से बाहर की ओर ढेर किए गए चार परतों से बनी है, और यह बॉक्स मॉडल है: बीच में कंटेंट, फिर इसके चारों ओर पैडिंग, फिर एक बॉर्डर, फिर बाहर की ओर मार्जिन।
दीवार पर एक फ्रेम की गई तस्वीर की कल्पना करें। तस्वीर कंटेंट है। तस्वीर के चारों ओर सफेद मैट पैडिंग है, फ्रेम के अंदर सांस लेने की जगह। लकड़ी का फ्रेम ही बॉर्डर है। और इस फ्रेम और अगले फ्रेम के बीच दीवार पर खाली जगह मार्जिन है। आप जो हर एलिमेंट स्टाइल करते हैं वह अंदर से बाहर की ओर उसी तरह पैकेज किया जाता है।
.card {
padding: 16px; /* कंटेंट के चारों ओर अंदर की जगह */
border: 2px solid #333; /* फ्रेम */
margin: 24px; /* बाहर की जगह, पड़ोसियों को दूर धकेलना */
}
padding, border, और margin
तीन स्पेसिंग परतें प्रत्येक एक काम करती हैं। पैडिंग अंदर की जगह है, कंटेंट और बॉर्डर के बीच। मार्जिन बाहर की जगह है, दूसरे एलिमेंट को दूर धकेलता है। बॉर्डर उनके बीच खींची गई रेखा है।
आप एक बार में सभी चार पक्षों के लिए एक value सेट कर सकते हैं, या एकल पक्ष को लक्ष्य कर सकते हैं:
.card {
padding: 20px; /* सभी चार पक्षों को 20px मिलते हैं */
margin-bottom: 32px; /* केवल नीचे का किनारा */
}shorthand padding: 20px ऊपर, दाएं, नीचे और बाएं को एक साथ कहने का एक त्वरित तरीका है। जब आपको एक पक्ष बाकी से अलग चाहिए, तो margin-bottom जैसी विशिष्ट property तक पहुंचें।
padding का उपयोग करें जब टेक्स्ट बॉक्स के अंदर तंग लगता है, और margin का उपयोग करें जब दो बॉक्स बहुत पास बैठते हैं। padding: 20px जैसी एक value सभी चार पक्षों को कवर करती है, या margin-bottom जैसी एक पक्ष का नाम दें जब केवल एक को बदलना हो। box-sizing: content-box vs border-box
यहाँ वह आश्चर्य है जो लगभग हर किसी को पकड़ता है। आप एक कार्ड को width: 300px पर सेट करते हैं, कुछ पैडिंग जोड़ते हैं, और कार्ड पृष्ठ पर 300 पिक्सल से चौड़ा निकलता है। आपने कोई गलती नहीं की। डिफॉल्ट रूप से, width केवल बीच में कंटेंट को मापता है, और कोई भी पैडिंग और बॉर्डर ऊपर जोड़े जाते हैं।
एक लाइन की fix है जो width को वैसे व्यवहार करने देती है जैसे आप उम्मीद करते हैं। box-sizing: border-box सेट करें, और अब width जो आप type करते हैं वह बॉक्स की पूरी width है, पैडिंग और बॉर्डर सहित:
.card {
box-sizing: border-box; /* width अब पैडिंग और बॉर्डर को शामिल करता है */
width: 300px;
padding: 20px; /* कार्ड 300px चौड़ा रहता है, 340px नहीं */
}width जो आप सेट करते हैं वह केवल बीच में कंटेंट को measure करते हैं, इसलिए पैडिंग और बॉर्डर बॉक्स को आपके द्वारा type की गई संख्या से बड़ा बनाते हैं। box-sizing: border-box सेट करना इसे ठीक करता है: width पूरा बॉक्स बन जाती है, पैडिंग और बॉर्डर शामिल। यह मुझे बहुत समय के लिए catch किया, इसलिए इसे जल्दी याद रखने के लायक है। Margin collapsing
एक और आश्चर्य, और यह margins stacking के बारे में है। दो पैराग्राफों को एक दूसरे के ऊपर रखें, पहले को 24px bottom margin दें और दूसरे को 16px top margin दें, और आप शायद उनके बीच 40px का अंतराल expect करते हैं। आपको actually 24px मिलता है।
इसे margin collapsing कहा जाता है। जब दो vertical margins मिलते हैं, तो ब्राउज़र उन्हें एक साथ नहीं जोड़ता है। यह दोनों में से बड़े को रखता है और छोटे को फेंक देता है। तो बड़ा margin जीतता है, और अंतराल 24px है, 40px नहीं। यह केवल top और bottom margins के साथ होता है, कभी padding के साथ नहीं।
.intro {
margin-bottom: 24px;
}
.details {
margin-top: 16px;
/* उनके बीच अंतराल 24px है, बड़ा margin, 40px नहीं */
}24px below 16px above से मिलता है 24px gap देता है, 40px नहीं। यह केवल top और bottom margins के साथ होता है, और यह सभी को पहली बार आश्चर्यचकित करता है।