📦 CSS Beginner

The Box Model

बॉक्स मॉडल

⏱ 1 hr3 topicsLive playground
🎯 By the end: You can explain padding, border and margin, predict how they change an element's size and spacing, and set box-sizing correctly to avoid the classic layout surprise.

If there is one idea that separates people who fight with CSS from people who control it, this is it. Every single element on a web page — every heading, button, image and paragraph — is a rectangular box. Once you can see those boxes and the four layers that make them up, CSS layout suddenly makes sense. We will use a simple human metaphor and a visualizer you can drag, so it sticks.

1Every element is a box — think of a person

Imagine a person standing in a room. That person is one HTML element. The box model has four layers, working from the inside out:

LayerThe person metaphorWhat it really is
ContentThe person themselvesThe actual text or image inside the element.
PaddingTheir personal space — part of themSpace inside the box, between the content and the border. The background colour fills it.
BorderTheir clothing — the visible edgeA line drawn around the padding. It has a width, style and colour.
MarginSocial distance from other peopleSpace outside the box that pushes other elements away. It is always transparent.
The one rule that fixes most confusion: padding is inside the box and shares its background colour; margin is outside the box and is always see-through. Padding cushions the content; margin separates whole elements.

So when something looks too cramped, you usually want more padding. When two things are too close to each other, you usually want more margin. Keep the person in mind: personal space vs. social distance.

Key points
  • Every element is a rectangular box with four layers: content, padding, border, margin.
  • Padding = personal space, inside the box, shares the background colour.
  • Border = the visible edge (clothing) around the padding.
  • Margin = social distance, outside the box, always transparent — it pushes other elements away.

2See it move — the box model visualizer

Reading about padding and margin only gets you so far. Drag the sliders below and watch the box react in real time. Notice three things as you play:

  • Increasing padding makes the coloured area grow — the content gets more breathing room inside.
  • Increasing margin does not change the coloured box; it pushes the dashed "other elements" further away.
  • The live CSS at the bottom is exactly what you would write to produce the box you see.
Drag to explore the box model
sibling element above
content
sibling element below
content padding (personal space) border (clothing) margin (social distance)
Key points
  • Padding grows the element's coloured area from the inside.
  • Margin adds transparent space outside, separating the element from its neighbours.
  • The CSS readout shows the exact code that produces the box on screen.

3The size surprise — box-sizing

Here is the gotcha that confuses almost every beginner. By default, when you set width: 200px, that 200px applies to the content only. Padding and border are then added on top. So a box like this:

.card {
  width: 200px;
  padding: 20px;
  border: 5px solid;
}

…is actually 250px wide on screen: 200 (content) + 20 + 20 (padding) + 5 + 5 (border). That extra 50px is why layouts "mysteriously" overflow.

The fix everyone uses: set box-sizing: border-box. Now width means the total width including padding and border — exactly what you expected. The content shrinks to fit instead of the box growing.

Because this behaviour is so much more intuitive, professionals apply it to the whole page at the very top of their CSS:

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

Add that one rule to any project and a whole category of layout headaches simply disappears. In the visualizer above, toggling box-sizing shows the difference live.

Key points
  • Default (content-box): width sets the content only; padding and border are added on top, making the box bigger than expected.
  • box-sizing: border-box makes width mean the total visible width — content shrinks to fit.
  • Pros apply box-sizing: border-box to everything at the top of their CSS to avoid overflow surprises.

★ Practical: build a comfortable card

Open any playground and recreate a simple card. Aim to feel the difference between padding and margin:

  1. Make a box with a background colour and some text inside.
  2. Add padding so the text is not touching the edges.
  3. Add a border so you can see the edge clearly.
  4. Add margin and notice it does not change the box — it only adds space around it.
  5. Add box-sizing: border-box and set a fixed width; confirm padding no longer makes it overflow.

Ready to test yourself?

Take the short quiz. Score 60% or more to mark this lesson complete.

Start the quiz →

💡 Log in to save your progress and earn the certificate.

← Previous
Colors & Backgrounds
Next →
Text & Fonts