Content box

Style the content box with the box model.

Width and box sizing: width, box-sizing

We don't want post cards to stretch across the whole screen; we use width to limit their size. But when we add padding, the browser adds it on top of the width, making the box bigger than planned.

To prevent this, we set box-sizing: border-box. Then padding and borders are counted inside the width, and the box stays at the size you specified.

Inner and outer spacing: padding, margin

padding is the inner space between the content and the element's edge; margin is the outer space between the element and its neighbors. Both can be set per side or with a shorthand.

For our post card, padding keeps content away from the edge, and margin gives breathing room between cards:

padding: 24px;
margin: 16px auto;

The auto value splits the left-right space equally, centering the card horizontally.

Shorthand: four values in one line

Both padding and margin can take all four sides in one declaration. One value applies to all sides, two values apply to top-bottom and left-right, and four values apply in order: top, right, bottom, left.

Writing margin: 16px auto sets top-bottom to 16px and left-right to auto. This is a handy pattern for centering a card horizontally.

Exercise Add the post card rule

Take the file with the body rule from the previous lesson. Below it, add a .post rule with four declarations: width: 640px, padding: 24px, margin: 16px auto, and box-sizing: border-box. End each declaration with a semicolon; don't delete the body rule.

Show example solution

/* Travel Diary stylesheet */

body {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
}

.post {
  width: 640px;
  padding: 24px;
  margin: 16px auto;
  box-sizing: border-box;
}

Test yourself

Which property sets the width of an element?
- font-size
- color
- width
- padding
Show answer

width — Correct. The width property sets the horizontal size of an element.
Complete the padding value
```
padding: ____;
```
Show answer
```
padding: 24px;
```
Match each property to its sample value

width

640px
padding

24px
margin

16px auto
box-sizing

border-box
Which margin shorthand centers a card horizontally?
- margin: 0;
- margin: 24px;
- margin: auto 0;
- margin: 16px auto;
Show answer

margin: 16px auto; — Correct. '16px auto' sets top-bottom to 16px and left-right to auto, centering the card.

Next lesson: Color and background

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies