🎨 Days 1–6 – CSS की नींव · दिन 04
दिन 4: Box Model: Margin, Padding, Border
⏱ 80 min📶 Beginner🎯 100% self-study
दिन 4 / 20
✅ आज आप सीखेंगे
- हर element एक box है: content, padding, border, margin
- Shorthand: 1, 2, 3 और 4 values
- box-sizing: border-box – “यह चौड़ा क्यों है?” का इलाज
- Margin collapse और margin: auto से बीच में
- border-radius, box-shadow, outline और modern reset
🏢 असली दुनिया में
एक junior developer का ticket: “width: 50% वाले दो cards साथ-साथ नहीं आते, दूसरा नीचे गिर जाता है।” हर card पर padding: 20px और 1px border था, तो असल में वह 50% + 42px चौड़ा था। Box model की यही एक ग़लतफ़हमी CSS में सबसे ज़्यादा layouts तोड़ती है।
हर element एक box है
HTML + CSS
<style>
.demo {
width: 220px;
padding: 20px; /* inside space, takes background */
border: 6px solid #264de4; /* the frame */
margin: 30px; /* outside space, transparent */
background: #dbeafe;
}
.outer { background: repeating-linear-gradient(45deg, #fef3c7 0 8px, #fde68a 8px 16px); display: inline-block; }
</style>
<div class="outer"><div class="demo">Content 220px wide</div></div>
<p>Yellow stripes = margin · blue fill = content + padding · dark blue = border</p>Shorthand values (ऊपर से घड़ी की दिशा में)
| आप लिखते हैं | मतलब |
|---|---|
| padding: 16px; | चारों ओर 16px |
| padding: 8px 16px; | ऊपर/नीचे 8px, बाएँ/दाएँ 16px (buttons!) |
| padding: 8px 16px 24px; | ऊपर 8, किनारे 16, नीचे 24 |
| padding: 4px 8px 12px 16px; | ऊपर, दाएँ, नीचे, बाएँ (TRouBLe) |
| margin: 0 auto; | ऊपर-नीचे margin नहीं, बीच में |
| margin-block / padding-inline | Logical: ऊपर+नीचे / बाएँ+दाएँ |
box-sizing: CSS की सबसे ज़रूरी line
HTML + CSS
<style>
.row { width: 100%; background: #f3f4f6; font-size: 0; }
.card { width: 50%; padding: 20px; border: 1px solid #94a3b8; background: #fff; display: inline-block; font-size: 14px; vertical-align: top; }
.fixed { box-sizing: border-box; }
</style>
<p style="font:600 13px system-ui">content-box (default): 50% + 40px padding + 2px border → second card falls</p>
<div class="row"><div class="card">Card A</div><div class="card">Card B</div></div>
<p style="font:600 13px system-ui">border-box: padding and border fit INSIDE the 50%</p>
<div class="row"><div class="card fixed">Card A</div><div class="card fixed">Card B</div></div>CSS – put this at the top of every project
/* A small modern reset */
*, *::before, *::after {
box-sizing: border-box; /* width includes padding + border */
}
body {
margin: 0; /* browsers add 8px by default */
line-height: 1.6;
}
img, video, svg {
display: block;
max-width: 100%; /* never overflow their container */
height: auto;
}
input, button, textarea, select {
font: inherit; /* form controls use the page font */
}Margin collapse और बीच में रखना
HTML + CSS
<style>
.a { margin-bottom: 30px; background: #fee2e2; padding: 8px; }
.b { margin-top: 20px; background: #dcfce7; padding: 8px; }
.page { max-width: 300px; margin: 16px auto; background: #e0e7ff; padding: 12px; text-align: center; }
</style>
<div class="a">margin-bottom: 30px</div>
<div class="b">margin-top: 20px → gap is 30px, not 50px!</div>
<div class="page">max-width + margin: auto = centred block</div>🧠 एक वाक्य में margin collapse
जब block elements के दो vertical margins मिलते हैं, browser सिर्फ़ बड़ा वाला लेता है। Padding, horizontal margins या flex/grid containers के अंदर ऐसा नहीं होता। Tip: spacing एक ही दिशा में दें (जैसे margin-bottom)।
Borders, radius, shadows और outline
HTML + CSS
<style>
.c { width: 150px; padding: 14px; margin: 8px; display: inline-block; background: white; vertical-align: top; font-size: 13px; }
.c1 { border: 2px dashed #f59e0b; border-radius: 12px; }
.c2 { border-radius: 16px; box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 8px 24px rgb(0 0 0 / 8%); }
.c3 { border-left: 6px solid #16a34a; background: #f0fdf4; border-radius: 0 10px 10px 0; }
.c4 { border-radius: 50%; width: 90px; height: 90px; background: #264de4; color: #fff; display: inline-grid; place-items: center; padding: 0; }
.c5 { outline: 3px solid #f59e0b; outline-offset: 4px; border-radius: 8px; }
</style>
<div class="c c1">dashed + radius</div>
<div class="c c2">soft layered shadow (cards)</div>
<div class="c c3">accent left border (alerts)</div>
<div class="c c4">circle</div>
<div class="c c5">outline (focus rings)</div>| Property | Note |
|---|---|
| border: 1px solid #ddd | width style colour – style ज़रूरी |
| border-radius: 50% | Square → circle (avatars) |
| box-shadow: x y blur spread colour | एक गहरी shadow से दो हल्की ज़्यादा स्वाभाविक |
| outline | Border जैसा पर जगह नहीं लेता – keyboard focus के लिए |
| overflow: hidden + radius | Child images को गोल कोनों तक काटता है |
असली task: product card
HTML + CSS
<style>
*, *::before, *::after { box-sizing: border-box; }
.product {
width: 240px;
background: white;
border-radius: 16px;
overflow: hidden; /* image follows the radius */
box-shadow: 0 10px 30px rgb(0 0 0 / 10%);
}
.product img { display: block; width: 100%; height: auto; }
.product .body { padding: 14px 16px 18px; }
.product h3 { margin: 0 0 4px; font-size: 1.1rem; }
.product p { margin: 0 0 12px; color: #6b7280; font-size: .9rem; }
.product .price { font-weight: 800; color: #c2410c; }
</style>
<article class="product">
<img src="images/rasmalai-400.webp" alt="Rasmalai" width="400" height="300">
<div class="body">
<h3>Rasmalai</h3>
<p>Soft paneer discs in kesar milk</p>
<span class="price">₹700/kg</span>
</div>
</article>🏅 आज के Job Skills
✔ content, padding, border और margin समझाना✔ Shorthand values आत्मविश्वास से✔ box-sizing: border-box और modern reset✔ radius, shadow और overflow से cards
Practice tasks
🏋️ Practice – ख़ुद करें
Task 1: Alert box बनाएँ: 4px left border, हल्का background, padding 12px 16px, margin-bottom 1rem; success और error versions बनाएँ।
Solution देखें
Task 2: 4px सफ़ेद border और हल्की shadow वाली गोल profile photo (120×120) बनाएँ।
Task 3: Fix करें: width: 50%, padding: 1rem, border: 2px solid वाले दो boxes साथ नहीं बैठते। एक-line fix लिखें।
Quick quiz
🧠 Quick Quiz – ख़ुद को जाँचें
1. कौन सा हिस्सा background colour दिखाता है?
Margin हमेशा पारदर्शी।
2. padding: 10px 20px का मतलब…
पहले vertical फिर horizontal।
3. border-box के साथ width: 300px + padding: 20px = box…
Padding अंदर जाता है।
4. मिलते दो vertical margins 40px और 25px का gap…
बड़े पर collapse होते हैं।
5. 600px चौड़े block को बीच में:
Auto margins ख़ाली जगह बाँटते हैं।
Interview corner
💼 Interview Corner
CSS box model और box-sizing समझाइए।
हर element content + padding + border + margin के रूप में बनता है। content-box (default) में width सिर्फ़ content पर लगती है, तो padding और border जुड़ जाते हैं। border-box में width में padding और border शामिल होते हैं, जिससे sizing अनुमानित होती है – ज़्यादातर projects इसे global रखते हैं।
Margin collapsing क्या है और surprises से कैसे बचें?
Blocks (siblings या parent/पहला child) के पास-पास vertical margins सबसे बड़े में मिल जाते हैं। एक दिशा में spacing, padding या gap, या flex/grid containers (जहाँ margins collapse नहीं होते) से बचें।
सारांश
- Box = content + padding + border + margin।
- Shorthand ऊपर से घड़ी की दिशा में।
- हमेशा *, *::before, *::after { box-sizing: border-box } से शुरू।
- Vertical margins collapse होते हैं; margin: 0 auto blocks को बीच में रखता है।
➡️ आगे
Day 5: advanced selectors, pseudo-classes, pseudo-elements, specificity और cascade – आपकी CSS “लगती क्यों नहीं”।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
मेरे page के चारों ओर सफ़ेद जगह क्यों है?
Browsers default में body पर margin: 8px देते हैं। Reset (body { margin: 0 }) इसे हटाता है।
क्या padding negative हो सकता है?
नहीं। Margins negative हो सकते हैं (elements को पास खींचने के लिए), padding नहीं।
