Layout

This is box 1.

Inspect this box to see the HTML for the boxes. Each box is made with a div tag.

In the inspector, look at the styles for the box. Both box1 and box2 have a display: inline-block style, which puts the boxes side by side.

Both box1 and box2 have a vertical-align: top style, which makes the top of the boxes line up with each other.

Box1 has both padding and margin styles. In the inspector, uncheck those styles and observe what happens.

This is box 2.

This is box 3, which is inside box 2.

It has both padding and margin styles.

This is box 4, which is inside box 2.

It has a text-align style.