बॉक्स मॉडल

चार परतें

अंदर से बाहर: content (टेक्स्ट/इमेज), padding (बॉर्डर के अंदर जगह), border (किनारे की रेखा), margin (बाहर की जगह, बॉक्स के बीच)।

फ्रेम की गई फोटो जैसा

content फोटो है, padding उसके चारों ओर का मैट बोर्ड है, border फ्रेम है, और margin अगली फ्रेम से पहले छोड़ी गई दीवार की जगह है।

एक रूल में सभी चार

padding/margin/border-width के लिए शॉर्टहैंड क्रम: top, right, bottom, left।

.box {
  width: 200px;
  padding: 16px;
  border: 2px solid #333;
  margin: 10px 20px;   /* top/bottom 10px, left/right 20px */
}

त्वरित जाँच: अंदर से बाहर की ओर, सही क्रम क्या है?

• content → border → padding → margin
• content → padding → border → margin
• margin → border → padding → content