📦 Intro to the Box Model

The box model is the simple idea that every HTML element on a webpage is treated as a box.

In the mockup of a webpage below, we can see boxes with:

• an h1 heading,
• a tagline,
• two call-to-action buttons, and
• three cards with headings, image placeholders and paragraphs.

Heading 1 Tagline Primary button Secondary button Heading 2 Heading 2 Heading 2 Paragraph Paragraph Paragraph

These HTML boxes sit next to each other and stack on top of one another depending on the CSS properties we give them.

Using CSS, we can style our elements, each treated as a box to respond to all kinds of devices. Their positions and sizing and spacing can respect each other.

The other great thing about the box model is that we can organize boxes inside of other boxes. The heading is a box. Each button is a box within a box.

Parent boxes include child boxes. Parent boxes can be used to organize and style children boxes.

For example, we can set a flexbox to display its children containers vertically or horizontally:

On a box, we can add:

• padding, to affect the space inside of the box, and
• margins, to affect the space outside of the box, in between that box and the boxes around it.

The key point here is that the box model allows you to control the layout and styling of every element on the webpage.