🎨 Days 1–6 – CSS Foundations · Day 04
Day 4: The Box Model: Margin, Padding, Border
⏱ 80 min📶 Beginner🎯 100% self-study
Day 4 / 20
✅ Today you will learn
- Every element is a box: content, padding, border, margin
- Shorthand: 1, 2, 3 and 4 values
- box-sizing: border-box – the fix for “why is it wider?”
- Margin collapse and centring with margin: auto
- border-radius, box-shadow, outline and a modern reset
🏢 In the real world
A junior developer’s ticket: “Two cards set to width: 50% don’t fit side by side, the second one drops down.” Each card had padding: 20px and a 1px border, so it was really 50% + 42px wide. This single box-model misunderstanding causes more broken layouts than anything else in CSS.
Every element is a 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 (clockwise from top)
| You write | Means |
|---|---|
| padding: 16px; | All four sides 16px |
| padding: 8px 16px; | Top/bottom 8px, left/right 16px (buttons!) |
| padding: 8px 16px 24px; | Top 8, sides 16, bottom 24 |
| padding: 4px 8px 12px 16px; | Top, right, bottom, left (TRouBLe) |
| margin: 0 auto; | No vertical margin, centred horizontally |
| margin-block / padding-inline | Logical: top+bottom / left+right |
box-sizing: the most important line of CSS
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 and centring
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 in one sentence
When two vertical margins of block elements touch, the browser uses only the bigger one. It does not happen with padding, horizontal margins, or inside flex/grid containers. Tip: give spacing in one direction only (e.g. margin-bottom).
Borders, radius, shadows and 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 is required |
| border-radius: 50% | Square → circle (avatars) |
| box-shadow: x y blur spread colour | Two soft shadows look more natural than one dark one |
| outline | Like border but takes no space – used for keyboard focus |
| overflow: hidden + radius | Clips child images to the rounded corners |
Real task: a 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 unlocked today
✔ Explain content, padding, border and margin✔ Use shorthand values confidently✔ Apply box-sizing: border-box and a modern reset✔ Build cards with radius, shadow and overflow
Practice tasks
🏋️ Practice – do it yourself
Task 1: Create an alert box: 4px left border, light background, padding 12px 16px, margin-bottom 1rem; make success and error versions.
Show solution
Task 2: Make a circular profile photo (120×120) with a 4px white border and a soft shadow.
Task 3: Fix: two boxes with width: 50%, padding: 1rem, border: 2px solid do not sit side by side. Write the one-line fix.
Quick quiz
🧠 Quick Quiz – test yourself
1. Which area shows the background colour?
Margin is always transparent.
2. padding: 10px 20px means…
Vertical then horizontal.
3. With border-box, width: 300px + padding: 20px gives a box of…
Padding goes inside.
4. Two touching vertical margins 40px and 25px give a gap of…
They collapse to the larger.
5. Centre a 600px-wide block horizontally:
Auto margins share the free space.
Interview corner
💼 Interview Corner
Explain the CSS box model and box-sizing.
Every element renders as content + padding + border + margin. With content-box (default) width applies to content only, so padding and border add to it. With border-box, width includes padding and border, which makes sizing predictable – most projects set it globally.
What is margin collapsing and how can you avoid surprises?
Adjacent vertical margins of blocks (siblings or parent/first child) merge into the largest one. Avoid surprises by spacing in one direction, using padding or gap, or using flex/grid containers where margins do not collapse.
Summary
- Box = content + padding + border + margin.
- Shorthand goes clockwise from the top.
- Always start with *, *::before, *::after { box-sizing: border-box }.
- Vertical margins collapse; margin: 0 auto centres blocks.
➡️ Next
Day 5: advanced selectors, pseudo-classes, pseudo-elements, specificity and the cascade – why your CSS “doesn’t apply”.
Frequently Asked Questions
Why is there white space around my page?
Browsers add margin: 8px to body by default. The reset (body { margin: 0 }) removes it.
Can padding be negative?
No. Margins can be negative (to pull elements closer), padding cannot.
