Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 1 · 5 / 8CSS boxes and spacing
Phase 1How the web works
8 topics · 2–3 wks
  1. 1What happens when you open a URL
  2. 2Reading HTML structure
  3. 3Common HTML elements
  4. 4CSS selectors and colours
  5. 5CSS boxes and spacing
  6. 6Layout with flexbox
  7. 7Browser DevTools
  8. 8Put your page online
JourneyPhase 1CSS boxes and spacing
01 / 08Overview

CSS boxes and spacing

You'll learn how every element is a box with padding, a border and margin around its content.

Why it mattersAlmost every "why is this too wide" or "why is there a gap" problem is the box model.
about 90 min·needs: CSS selectors and colours
02 / 08

Watch & read

Start with the required ones. The others are there when you need them.

Video
HTML & CSS for beginners part 12: The CSS box model, margin, borders and padding explainedKevin Powell · YouTube · 18 min · English
MMamun's noteWatch all of it. He shows each layer one at a time, which is how it should sink in.
Video
box-sizing: border-box explainedKevin Powell · YouTube · 5 min · English
MMamun's noteFive minutes on the one line that saves you from the "too wide" surprise. Watch it after the first video.
ArticleOptional
The box modelMDN Web Docs · 30 min · English
MMamun's noteStart at "What is the CSS box model?" and read to the end of "Margins, padding, and borders". Skip the first sections on display types for now.
VideoOptional
css full course bangla tutorial 15: Box model, content, padding, border, marginAnisul Islam · YouTube · 11 min · Bangla
MMamun's noteThe four layers explained in Bangla. Watch it if the English videos went too fast.
03 / 08

Explanation

You set a card to width: 300px. You add some padding so the text is not squashed. Now the card is wider than 300 and it breaks your layout. Where did the extra come from?

Think of a framed photo on a wall. The photo is the content. The white card around the photo inside the frame is the padding. The frame is the border. The gap between this frame and the next one on the wall is the margin.

Every element on a page is a box with these four layers, from inside to outside:

  1. content: the text or image.
  2. padding: space inside the border. It takes the box's background colour.
  3. border: a line around the padding.
  4. margin: space outside the border. It is always see-through.
.card {
  width: 300px;
  padding: 20px;
  border: 2px solid #dddddd;
  margin: 16px;
}

By default, width is only the content. The browser adds padding and border on both sides: 300 + 20 + 20 + 2 + 2 = 344px. That surprise is the common mistake. People set a width, add padding, and their boxes no longer fit side by side.

The fix is one line that most developers put at the top of every CSS file:

* { box-sizing: border-box; }

Now width means the whole box, border included. The card stays 300px and the content gets smaller to make room for the padding.

When you read CSS, look for padding, border and margin together, and check whether border-box is set. One number like padding: 20px means all four sides. Two numbers like padding: 10px 20px mean top and bottom first, then left and right.

Words to recognise
box modelcontentpaddingbordermarginwidthbox-sizingborder-box
04 / 08

Code tour

Click a line number with a ring to read the note for that line.

styles.css4 notes
1* {
box-sizing: border-box;
Mentor note · line 2
With this, width means the whole box including padding and border. Most projects start with it.
3}
4
5.card {
width: 300px;
padding: 20px;
8 border: 2px solid #dddddd;
margin: 16px auto;
10 background: white;
11}
05 / 08

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3From inside to outside, what is the order of the layers?
  2. 2 / 3With no box-sizing set, how wide is width: 100px; padding: 10px; border: 1px solid;?
  3. 3 / 3After box-sizing: border-box, how wide is that same box?
06 / 08

Explain it back

Only you can see this. Log in to keep it.0 words
07 / 08

How confident are you with CSS boxes and spacing?

08 / 08

Done

You can now
Look at a box's CSS and work out how wide it really is on screen, and where its space comes from.
Next: Layout with flexbox Back to Phase 1
On this page
  1. 01CSS boxes and spacing
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Quick check
  6. 06Explain it back
  7. 07Confidence
  8. 08Done
Up next · 02 / 08Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 1How the web works
8 topics · 2–3 wks
  1. 1What happens when you open a URL
  2. 2Reading HTML structure
  3. 3Common HTML elements
  4. 4CSS selectors and colours
  5. 5CSS boxes and spacing
  6. 6Layout with flexbox
  7. 7Browser DevTools
  8. 8Put your page online
JourneyPhase 1CSS boxes and spacing
01 / 08Overview

CSS boxes and spacing

You'll learn how every element is a box with padding, a border and margin around its content.

Why it mattersAlmost every "why is this too wide" or "why is there a gap" problem is the box model.
about 90 min·needs: CSS selectors and colours
02 / 08

Watch & read

Start with the required ones. The others are there when you need them.

Video
HTML & CSS for beginners part 12: The CSS box model, margin, borders and padding explainedKevin Powell · YouTube · 18 min · English
MMamun's noteWatch all of it. He shows each layer one at a time, which is how it should sink in.
Video
box-sizing: border-box explainedKevin Powell · YouTube · 5 min · English
MMamun's noteFive minutes on the one line that saves you from the "too wide" surprise. Watch it after the first video.
ArticleOptional
The box modelMDN Web Docs · 30 min · English
MMamun's noteStart at "What is the CSS box model?" and read to the end of "Margins, padding, and borders". Skip the first sections on display types for now.
VideoOptional
css full course bangla tutorial 15: Box model, content, padding, border, marginAnisul Islam · YouTube · 11 min · Bangla
MMamun's noteThe four layers explained in Bangla. Watch it if the English videos went too fast.
03 / 08

Explanation

You set a card to width: 300px. You add some padding so the text is not squashed. Now the card is wider than 300 and it breaks your layout. Where did the extra come from?

Think of a framed photo on a wall. The photo is the content. The white card around the photo inside the frame is the padding. The frame is the border. The gap between this frame and the next one on the wall is the margin.

Every element on a page is a box with these four layers, from inside to outside:

  1. content: the text or image.
  2. padding: space inside the border. It takes the box's background colour.
  3. border: a line around the padding.
  4. margin: space outside the border. It is always see-through.
.card {
  width: 300px;
  padding: 20px;
  border: 2px solid #dddddd;
  margin: 16px;
}

By default, width is only the content. The browser adds padding and border on both sides: 300 + 20 + 20 + 2 + 2 = 344px. That surprise is the common mistake. People set a width, add padding, and their boxes no longer fit side by side.

The fix is one line that most developers put at the top of every CSS file:

* { box-sizing: border-box; }

Now width means the whole box, border included. The card stays 300px and the content gets smaller to make room for the padding.

When you read CSS, look for padding, border and margin together, and check whether border-box is set. One number like padding: 20px means all four sides. Two numbers like padding: 10px 20px mean top and bottom first, then left and right.

Words to recognise
box modelcontentpaddingbordermarginwidthbox-sizingborder-box
04 / 08

Code tour

Click a line number with a ring to read the note for that line.

styles.css4 notes
1* {
box-sizing: border-box;
Mentor note · line 2
With this, width means the whole box including padding and border. Most projects start with it.
3}
4
5.card {
width: 300px;
padding: 20px;
8 border: 2px solid #dddddd;
margin: 16px auto;
10 background: white;
11}
05 / 08

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3From inside to outside, what is the order of the layers?
  2. 2 / 3With no box-sizing set, how wide is width: 100px; padding: 10px; border: 1px solid;?
  3. 3 / 3After box-sizing: border-box, how wide is that same box?
06 / 08

Explain it back

Only you can see this. Log in to keep it.0 words
07 / 08

How confident are you with CSS boxes and spacing?

08 / 08

Done

You can now
Look at a box's CSS and work out how wide it really is on screen, and where its space comes from.
Next: Layout with flexbox Back to Phase 1
On this page
  1. 01CSS boxes and spacing
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Quick check
  6. 06Explain it back
  7. 07Confidence
  8. 08Done
Up next · 02 / 08Watch & read

You set a card to width: 300px. You add some padding so the text is not squashed. Now the card is wider than 300 and it breaks your layout. Where did the extra come from?

Think of a framed photo on a wall. The photo is the content. The white card around the photo inside the frame is the padding. The frame is the border. The gap between this frame and the next one on the wall is the margin.

Every element on a page is a box with these four layers, from inside to outside:

  1. content: the text or image.
  2. padding: space inside the border. It takes the box's background colour.
  3. border: a line around the padding.
  4. margin: space outside the border. It is always see-through.
.card {
  width: 300px;
  padding: 20px;
  border: 2px solid #dddddd;
  margin: 16px;
}

By default, width is only the content. The browser adds padding and border on both sides: 300 + 20 + 20 + 2 + 2 = 344px. That surprise is the common mistake. People set a width, add padding, and their boxes no longer fit side by side.

The fix is one line that most developers put at the top of every CSS file:

* { box-sizing: border-box; }

Now width means the whole box, border included. The card stays 300px and the content gets smaller to make room for the padding.

When you read CSS, look for padding, border and margin together, and check whether border-box is set. One number like padding: 20px means all four sides. Two numbers like padding: 10px 20px mean top and bottom first, then left and right.

Words to recognise
box modelcontentpaddingbordermarginwidthbox-sizingborder-box

You set a card to width: 300px. You add some padding so the text is not squashed. Now the card is wider than 300 and it breaks your layout. Where did the extra come from?

Think of a framed photo on a wall. The photo is the content. The white card around the photo inside the frame is the padding. The frame is the border. The gap between this frame and the next one on the wall is the margin.

Every element on a page is a box with these four layers, from inside to outside:

  1. content: the text or image.
  2. padding: space inside the border. It takes the box's background colour.
  3. border: a line around the padding.
  4. margin: space outside the border. It is always see-through.
.card {
  width: 300px;
  padding: 20px;
  border: 2px solid #dddddd;
  margin: 16px;
}

By default, width is only the content. The browser adds padding and border on both sides: 300 + 20 + 20 + 2 + 2 = 344px. That surprise is the common mistake. People set a width, add padding, and their boxes no longer fit side by side.

The fix is one line that most developers put at the top of every CSS file:

* { box-sizing: border-box; }

Now width means the whole box, border included. The card stays 300px and the content gets smaller to make room for the padding.

When you read CSS, look for padding, border and margin together, and check whether border-box is set. One number like padding: 20px means all four sides. Two numbers like padding: 10px 20px mean top and bottom first, then left and right.

Words to recognise
box modelcontentpaddingbordermarginwidthbox-sizingborder-box