समझें कि हर तत्व कैसे content, padding, border और margin से बना एक बॉक्स है, और box-sizing में महारत हासिल करें।
इस पाठ को Kodokon में खोलेंCSS में, पेज पर हर तत्व एक आयताकार बॉक्स है, भले ही आप उसे देख न पाएं। उस बॉक्स की चार परतें होती हैं, दीवार पर टँगी एक फ्रेम की हुई पेंटिंग की तरह: content (खुद चित्र), padding (चित्र और फ्रेम के बीच का सफेद बॉर्डर), border (खुद फ्रेम) और margin (फ्रेम और दीवार पर लगी अन्य पेंटिंगों के बीच की खाली जगह)। इसी को हम बॉक्स मॉडल कहते हैं।
तीन properties इन परतों को नियंत्रित करती हैं। padding भीतरी जगह तय करती है, content और border के बीच। border सीमा खींचती है: आप इसे एक मोटाई, एक शैली (सतत रेखा के लिए solid) और एक रंग देते हैं। margin बाहरी जगह तय करती है, जो पड़ोसी तत्वों को दूर धकेलती है। ये सभी दूरियाँ पिक्सेल (px) में व्यक्त होती हैं।
.card {
padding: 16px;
border: 2px solid black;
margin: 24px;
}आप हर पक्ष को अलग-अलग समायोजित कर सकते हैं padding-top, padding-right, padding-bottom और padding-left से, और यही बात margin पर भी लागू होती है। संक्षिप्त रूप भी हैं: दो मानों के साथ, पहला ऊपर और नीचे पर लागू होता है, दूसरा बाएं और दाएं पर। तो padding: 8px 16px; का मतलब है ऊपर और नीचे 8 पिक्सेल, बाएं और दाएं 16 पिक्सेल।
.card {
padding: 8px 16px;
margin-top: 32px;
margin-bottom: 8px;
}एक क्लासिक जाल: डिफ़ॉल्ट रूप से, जब आप width: 200px; लिखते हैं (width property चौड़ाई तय करती है), वे 200 पिक्सेल केवल content को ढँकते हैं। padding और border उसके ऊपर जुड़ जाते हैं! width: 200px, padding: 16px और border: 2px वाला एक बॉक्स असल में 200 + 16 + 16 + 2 + 2 = 236 पिक्सेल चौड़ाई घेरता है। box-sizing: border-box; property इसे ठीक करती है: तब घोषित चौड़ाई में padding और border शामिल हो जाते हैं। बॉक्स सचमुच 200 पिक्सेल चौड़ा होता है, और सिकुड़ने वाला content होता है।
* {
box-sizing: border-box;
}
.card {
width: 200px;
padding: 16px;
border: 2px solid black;
}box-sizing: border-box के बिना, width: 100px, padding: 10px और border: 5px solid black वाला एक बॉक्स कुल कितनी चौड़ाई घेरता है?margin: 10px 20px; का क्या मतलब है?