WebcoreFE

Let's look at boxes

The browser puts every element in an invisible rectangle, called a box. Headings, paragraphs, pictures, even links each get one. CSS lets you change four layers of every box. Together, those layers are called the box model.

Think of framed photos on a wall. The photo is the content. The paper around the photo, inside the frame, is the padding. The wooden frame is the border. The empty wall that keeps two frames apart is the margin. A chalk line drawn around a frame is like an outline: you can see it, but it takes up no wall space.

margin

border

padding

content

margin

outline

margin

border

padding

content

margin

outline

From the inside out: content, padding, border, margin. Padding is inside the border, so it shows the box's background color. Margin is outside the border, so it stays see-through.

The same layers, measured

Here is one box drawn as plain colored layers, with the size of each layer on all four sides. Browsers show boxes this way in their developer tools.

margin 16 16

border 3 3

padding 16 16

300 wide content

16 16

3 3

16 16

All numbers are in pixels. The box itself is 3 + 16 + 300 + 16 + 3 = 338 pixels wide, and the margin keeps 16 more pixels of empty space around it.

The four layers in CSS

width: 300px;content size
padding: 16px;space inside
border: 3px solid;the line
margin: 16px;space outside

A closer look

One side or all four sides

padding: 16px; adds the same space on all four sides. To change one side, add the side's name: padding-top, padding-right, padding-bottom or padding-left. Margin works the same way. With two values, like padding: 8px 16px;, the first is for the top and bottom, and the second is for the left and right. With four values, they go around the box like a clock, starting at the top: top, right, bottom, left.

The three parts of a border

A border needs a thickness, a style and a color, like border: 3px solid #11141A;. The style can be solid, dashed, dotted or double. The style is the part that makes the line appear, so a border without one stays hidden. border-bottom draws a line on one side only, which is handy under headings.

Width and height

width and height set the size of the content area. Most of the time, it's best to leave height out, so the box grows to fit whatever is inside. max-width is often better than width: the box can shrink on a small phone screen, and it stops growing at the number you set. min-height works the other way: the box is at least that tall, and it still grows if it needs to.

How wide is the box really?

The width you set is only the content. Padding and border are added on top of it. A box with width: 300px;, padding: 16px; and a 3px border is 300 + 16 + 16 + 3 + 3 = 338 pixels wide. Margin then adds empty space around that. Many websites add box-sizing: border-box;, which makes the width include the padding and border, so 300px stays 300px.

Centering a box

Give a box a width or max-width, then set margin-left: auto; and margin-right: auto;. The browser splits the leftover space evenly on both sides, so the box sits in the middle.

Outline or border?

An outline looks like a border, but it takes up no space, so nothing around it moves when you add it. Browsers use outlines to show which link or button is selected when you move around with the Tab key.

Let's build it

Let's turn two plain Front Page Bytes stories into neat cards. Each story is a <div class="card"> box. Each code box opens on the CSS tab with the new lines highlighted. Click HTML to see the page being styled.

Step 1: Start with two white boxes

Your code

body {  background-color: #F0F7FF;}.card {  background-color: white;}

<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <div class="card">      <h2>New Phones Arrive This Week</h2>      <p>Three new phones go on sale on Friday. Each one has a bigger battery.</p>    </div>    <div class="card">      <h2>Laptop Prices Drop</h2>      <p>Many laptops cost less this month. Students can save up to ₱5,000.</p>    </div>  </body></html>

What you see

A white background shows where each .card box is. Notice that the text touches the edges, and the two boxes almost touch each other. Let's fix that one layer at a time.

Step 2: Add space inside: padding

Your code

body {  background-color: #F0F7FF;}.card {  background-color: white;  padding: 16px;}

<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <div class="card">      <h2>New Phones Arrive This Week</h2>      <p>Three new phones go on sale on Friday. Each one has a bigger battery.</p>    </div>    <div class="card">      <h2>Laptop Prices Drop</h2>      <p>Many laptops cost less this month. Students can save up to ₱5,000.</p>    </div>  </body></html>

What you see

padding: 16px; adds 16 pixels of space inside each box, on all four sides. The white background fills the padding too, so the cards look roomier.

Step 3: Draw a line around it: border

Your code

body {  background-color: #F0F7FF;}.card {  background-color: white;  padding: 16px;  border: 3px solid #11141A;}

<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <div class="card">      <h2>New Phones Arrive This Week</h2>      <p>Three new phones go on sale on Friday. Each one has a bigger battery.</p>    </div>    <div class="card">      <h2>Laptop Prices Drop</h2>      <p>Many laptops cost less this month. Students can save up to ₱5,000.</p>    </div>  </body></html>

What you see

border: 3px solid #11141A; draws a 3-pixel, solid, dark line around each box, just outside the padding.

Step 4: Add space outside: margin

Your code

body {  background-color: #F0F7FF;}.card {  background-color: white;  padding: 16px;  border: 3px solid #11141A;  margin-bottom: 16px;}

<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <div class="card">      <h2>New Phones Arrive This Week</h2>      <p>Three new phones go on sale on Friday. Each one has a bigger battery.</p>    </div>    <div class="card">      <h2>Laptop Prices Drop</h2>      <p>Many laptops cost less this month. Students can save up to ₱5,000.</p>    </div>  </body></html>

What you see

margin-bottom: 16px; adds empty space below each card, so they no longer touch. Margin is outside the border, so it shows the page's light blue, not white.

Step 5: Set a width and center the cards

Your code

body {  background-color: #F0F7FF;}.card {  background-color: white;  padding: 16px;  border: 3px solid #11141A;  margin-bottom: 16px;  max-width: 320px;  margin-left: auto;  margin-right: auto;}

<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <div class="card">      <h2>New Phones Arrive This Week</h2>      <p>Three new phones go on sale on Friday. Each one has a bigger battery.</p>    </div>    <div class="card">      <h2>Laptop Prices Drop</h2>      <p>Many laptops cost less this month. Students can save up to ₱5,000.</p>    </div>  </body></html>

What you see

max-width: 320px; keeps each card from getting wider than 320 pixels. margin-left: auto; and margin-right: auto; share the leftover space on both sides, so the cards sit in the middle.

Step 6: Mark one card with an outline

Your code

body {  background-color: #F0F7FF;}.card {  background-color: white;  padding: 16px;  border: 3px solid #11141A;  margin-bottom: 16px;  max-width: 320px;  margin-left: auto;  margin-right: auto;}.featured {  outline: 3px dashed #FF4B4B;}

<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <div class="card">      <h2>New Phones Arrive This Week</h2>      <p>Three new phones go on sale on Friday. Each one has a bigger battery.</p>    </div>    <div class="card featured">      <h2>Laptop Prices Drop</h2>      <p>Many laptops cost less this month. Students can save up to ₱5,000.</p>    </div>  </body></html>

What you see

In the HTML tab, the second card now also has the class featured. The new rule gives it a red dashed outline.

Compare the two cards: both are the same size, and nothing moved. That's the difference between an outline and a border.

Quick notes

margin Space outside the border

.card { margin: 16px; }

How to use

margin: 16px; The same space on all four sides.
margin: 10px 20px; 10px on the top and bottom, 20px on the left and right.
margin-top / -right / -bottom / -left Space on one side only.
auto Shares the leftover space. On the left and right, it centers a box that has a width.

Examples

Space between two cards.
```
.card {  margin-bottom: 16px;}
```
Center a box on the page.
```
.page {  max-width: 600px;  margin-left: auto;  margin-right: auto;}
```
Remove the space above the first heading.
```
h1 {  margin-top: 0;}
```

padding Space inside the border

.card { padding: 16px; }

How to use

padding: 16px; The same space on all four sides.
padding: 8px 16px; 8px on the top and bottom, 16px on the left and right.
padding-top / -right / -bottom / -left Space on one side only.
Padding is inside the border, so it shows the box's background color.

Examples

Keep text away from the edges of a card.
```
.card {  padding: 16px;}
```
A link that looks like a button.
```
.button {  padding: 8px 16px;  background-color: gold;}
```
Extra room at the bottom only.
```
.notice {  padding-bottom: 24px;}
```

border A line around the box

.card { border: 3px solid #11141A; }

How to use

3px How thick the line is.
solid / dashed / dotted / double The style of the line. Without a style, no border shows.
#11141A The color of the line.
border-top / -bottom / -left / -right A line on one side only.

Examples

A frame around a card.
```
.card {  border: 3px solid #11141A;}
```
A line under a heading.
```
h2 {  border-bottom: 2px solid #4CC9FF;}
```
A dashed coupon box.
```
.coupon {  border: 2px dashed #FF4B4B;}
```

outline A line that takes no space

.featured { outline: 3px dashed #FF4B4B; }

How to use

3px dashed #FF4B4B The same three parts as a border: thickness, style, color.
An outline takes no space, so nothing around it moves.
outline-offset: 4px; Moves the outline a little away from the box.

Examples

Mark one card as featured.
```
.featured {  outline: 3px dashed #FF4B4B;}
```
See where every box is while you build a page.
```
div {  outline: 1px solid red;}
```

width / max-width How wide the content is

.card { max-width: 320px; }

How to use

300px A fixed width.
50% Half the width of the box it sits in.
max-width: 600px; Can get narrower on small screens, and stops growing at 600px.
min-width: 200px; Stays at least 200px wide.

Examples

A narrow card.
```
.card {  width: 300px;}
```
A page column that stays easy to read on big screens.
```
.page {  max-width: 700px;}
```
Pictures that stay inside their box.
```
img {  max-width: 100%;}
```

height / min-height How tall the content is

.banner { min-height: 120px; }

How to use

200px A fixed height. Content that doesn't fit spills out.
min-height: 150px; At least this tall, and it grows if the content needs more room.
Most of the time, leave height out. The box grows to fit its content.

Examples

A banner that is at least 120px tall.
```
.banner {  min-height: 120px;}
```
A square box.
```
.square {  width: 100px;  height: 100px;}
```

Common mistakes

These are mistakes many beginners make. Each mini browser shows what really happens.

Setting a height that is too small

The mistake

body {  background-color: #F0F7FF;}.card {  background-color: white;  padding: 16px;  border: 3px solid #11141A;  margin-bottom: 16px;  height: 40px;}

<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <div class="card">      <h2>New Phones Arrive This Week</h2>      <p>Three new phones go on sale on Friday. Each one has a bigger battery.</p>    </div>    <div class="card">      <h2>Laptop Prices Drop</h2>      <p>Many laptops cost less this month. Students can save up to ₱5,000.</p>    </div>  </body></html>

What you see

The text needs more room than 40px, but the box stays 40 pixels tall. The words spill out of the border and run into the card below.

Tip: Leave height out so the box grows with its content, or use min-height instead.

A border without a style

The mistake

body {  background-color: #F0F7FF;}.card {  background-color: white;  padding: 16px;  border: 3px #11141A;  margin-bottom: 16px;}

<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <div class="card">      <h2>New Phones Arrive This Week</h2>      <p>Three new phones go on sale on Friday. Each one has a bigger battery.</p>    </div>    <div class="card">      <h2>Laptop Prices Drop</h2>      <p>Many laptops cost less this month. Students can save up to ₱5,000.</p>    </div>  </body></html>

What you see

The thickness and color are there, but there is no style like solid. Without a style, the browser draws no line at all.

Tip: Add a style word, like solid: border: 3px solid #11141A;

Width 100% plus padding

The mistake

body {  background-color: #F0F7FF;}.card {  background-color: white;  width: 100%;  padding: 16px;  border: 3px solid #11141A;  margin-bottom: 16px;}

<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <div class="card">      <h2>New Phones Arrive This Week</h2>      <p>Three new phones go on sale on Friday. Each one has a bigger battery.</p>    </div>    <div class="card">      <h2>Laptop Prices Drop</h2>      <p>Many laptops cost less this month. Students can save up to ₱5,000.</p>    </div>  </body></html>

What you see

width: 100% makes the content as wide as the page. Then the padding and border are added on top, so each card is wider than the page and sticks out on the right.

Tip: Use max-width instead, or add box-sizing: border-box; so the width includes the padding and border.

Test your knowledge

Edit the CSS on the left. Open the HTML tab to see the class names you can use. The mini browser updates as you type, and each goal gets a check mark when it's done.

No clicking needed. Each goal gets a check mark by itself once your code does it.

Add padding inside the .weather boxes. not done yet
Give the .weather boxes a border. not done yet
Use margin-bottom to put space between the two boxes. not done yet
Limit how wide the boxes get with max-width. not done yet

Your code

What you see

Try an exercise

Recap

Every element is a box with four layers, from the inside out: content, padding, border and margin.
Padding is space inside the border, and margin is space outside it. Both can be set for all four sides at once or for one side.
A border needs a thickness, a style and a color. An outline looks similar but takes no space. max-width and min-height set sizes that still fit any screen.

References

Lesson content prepared by the WebCore F.E. team for beginner learners. The following references were used in preparing this lesson.

W3C. CSS Box Model Module Level 3 (official specification). Open reference
W3C. CSS Backgrounds and Borders Module Level 3 (official specification). Open reference
W3C. CSS Basic User Interface Module Level 4 (official specification, outline). Open reference
LibreTexts. Web Site Design (2022, open textbook). Open reference

waving_hand Let's look at boxes

The same layers, measured

The four layers in CSS

search A closer look

One side or all four sides

The three parts of a border

Width and height

How wide is the box really?

Centering a box

Outline or border?

construction Let's build it

1 Step 1: Start with two white boxes

2 Step 2: Add space inside: padding

3 Step 3: Draw a line around it: border

4 Step 4: Add space outside: margin

5 Step 5: Set a width and center the cards

6 Step 6: Mark one card with an outline

sticky_note_2 Quick notes

report Common mistakes

error Setting a height that is too small

error A border without a style

error Width 100% plus padding

quiz Test your knowledge

task_alt Recap

menu_book References

Let's look at boxes

A closer look

Let's build it

Step 1: Start with two white boxes

Step 2: Add space inside: padding

Step 3: Draw a line around it: border

Step 4: Add space outside: margin

Step 5: Set a width and center the cards

Step 6: Mark one card with an outline

Quick notes

Common mistakes

Setting a height that is too small

A border without a style

Width 100% plus padding

Test your knowledge

Recap

References