The Box Model

An HTML element can take up more space on a page than its content itself. An element is surrounded by 3 other parts:

• The padding around the element
• The border around the padding
• The margin outside the border, to separate from other elements.

For example, here's a paragraph with a padding, border and margin:

The quick brown fox packed my box with five dozen liquor jugs and then jumped over the lazy dogs.

Here's each part marked:

The element itself is in the middle, surrounded by padding in the same color, then a border, and finally a (white) margin on the outside.

The paragraph above uses the following CSS:

.green-box{
  margin: 15px; 
  border: solid 5px blue;
  padding: 10px;
  background-color: green;
}

Hover above for more info

And HTML:

<p class="green-box">The quick brown fox packed my box with five dozen liquor jugs and then jumped over the lazy dogs.</p>

By default, the padding, border and margin are all outside the specified width of the element itself. If you want to change that, you can read about box-sizing.

Store Page

Selectors added a margin to an image on the store page. Can you now add a border to the image?