Box Model

As we said before, CSS treats every HTML element as a box, so the term Box Model is used when talking about design and layout.

Look at this image below:

A box (which is an element) consists of the actual content, which is surrounded by its border (that can, or not, be invisible, but always present). The space between the content and the border is what we call padding and, the space in the outer layer of the border is what we call margin.

Here's an absolute must read article on the Box Model.

We can also see the box model for each of our elements in the dev tools. Not sure what's going on with one of your elements padding/margin? Have a look at the 'computed' tab. Have a look below:

---

Practice:

Did you read the article? Amazing! Let's look at this Codepen we prepared for you.

The instructions are pretty simple. Without touching the CSS, try moving the html elements around, nesting them in a way that allow you to answer the questions listed.