HTML & CSS
Every element is a box. The box has content, padding, border, and margin.
Use box-sizing: border-box for predictable sizing. Then the width you set is the visible box width, not just the content width.
In the standard CSS box model, width and height apply only to the content area. Padding and border are added after that.
So a card with width: 300px, padding: 20px, and a 2px border becomes wider than 300px. This is a common reason pages overflow on phones.
0 of 8 lessons done · proved by a submitted project with a public repository
These two cards both say width: 300px. Only the second one stays visually 300px wide because it uses border-box.
<article class="card content-box">
<h2>Content box</h2>
<p>Width grows after padding and border.</p>
</article>
<article class="card border-box">
<h2>Border box</h2>
<p>Width includes padding and border.</p>
</article>
<style>
.card {
width: 300px;
padding: 20px;
border: 2px solid #222;
margin-bottom: 16px;
}
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
</style>Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.
0 of 5 done
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
.page {
max-width: 960px;
margin: 0 auto;
padding: 16px;
}Margin sits outside the border. It creates space between boxes, but it is not counted as part of the box itself.
If two sections feel too far apart, check their margins first. Beginners often add padding to fix outside spacing and make the box bigger by accident.
Use browser DevTools when spacing looks wrong. Select the element and check the box model view.
It shows content size, padding, border, and margin separately. This saves time when your project page breaks before a HackIndia submission deadline.
This is a simple card style you can reuse in your front-end project. It avoids fixed page width and keeps spacing clear.
<article class="project-card">
<h2>Campus Canteen Queue Tracker</h2>
<p>Shows estimated waiting time for each counter.</p>
<a href="/demo.html">View demo</a>
</article>
<style>
.project-card {
box-sizing: border-box;
max-width: 420px;
padding: 1rem;
border: 1px solid #d0d0d0;
margin: 1rem 0;
border-radius: 12px;
}
</style>Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.
0 of 5 done
Answer the quick check to finish this lesson.