The Box Model

Any color you like - as long as it's a box...

When using CSS, the main thing to remember is that every HTML element is a box.

This <h2> heading?

It's a box!

This <p> paragraph is a box.



What about this
<div>
which is quite clearly a circle?

No, that's just a box with a massively rounded border-radius - thanks, CSS: 

 div {
  width: 15em;
  height: 15em;
  border-radius: 50%;
}

This emoji 📦 ?
Well, ok, it's not a box. It's just a character within a <p> paragraph (which is a box!)
You will need to wrap the emoji in some kind of html tag (like <span>) for it to be a box that CSS can work with:

<span id="box-emoji"> 📦 </span>

NOW it is a box! 📦

Now that you know that every element is a box, you can start using width & height, padding, margin and more to give each element the dimensions and spacing you want.

padding margin