HTML & CSS - lesson 2 | HackIndia Skills

Key point

One idea

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.

What width means

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.

Example

See the difference

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>

Your to-do

Use it globally

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.

Add the global border-box pattern near the top of your CSS.
Let every element and pseudo-element inherit it.
Use max-width for containers that should shrink on smaller screens.
Use margin for space outside a box.
Use padding for space inside a box.

0 of 5 done

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
}

Common mistake

Margin is not width

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.

Tip

Inspect before changing

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.