The box model

Every element is a box

The browser draws every element as a rectangular box. A box has four layers. From the inside to the outside, they are:

1. Content: the text or picture.
2. Padding: space between the content and the border.
3. Border: a line around the padding.
4. Margin: space outside the border, which pushes other boxes away.

The background color fills the content and the padding. It does not fill the margin.

Writing the values

.note {
  padding: 16px;
  border: 1px solid gray;
  margin-bottom: 24px;
}

• A single value, such as padding: 16px, applies to all four sides.
• Two values, such as padding: 8px 16px, set top and bottom first, then left and right.
• You can also set one side: padding-left, margin-top, and so on.
• border-radius rounds the corners.

How wide is a box?

By default, width is the width of the content only. Padding and border are added to it. A box with width: 300px, padding: 20px, and a 2px border is really 344px wide.

Most people prefer that width includes everything. The declaration box-sizing: border-box does that.

Your turn

Both cards have the class card, so one rule styles both. Write your declarations in style.css.