Layout

box1

Open the inspector by right clicking anywhere in this box, and clicking Inspect at the bottom of the menu.

In the inspector, click box1. It is made with a div tag.

In the inspector, look at the styles for this box. It has a width, height, and border. Those styles are needed to make a box.

This box also has padding and margin styles. In the inspector, uncheck those styles and observe what happens.

box2

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

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