The Box Model

The first thing we need to understand is how CSS sizes elements. This is called the *the box model,* as everything on the web begins as a rectangle:

We’ll go inside-to-outside.

Content

The content area is the guts of the element, usually text or an image. Its dimensions are defined by that content, but also can be specified directly via width or height. (More on those soon.) It often has a background color.

[I’ve pulled the CSS reset in to all of these sandboxes, so we should only be seeing what’s written here. 🤞](https://typography-and-interaction-too.github.io/sandbox/box-content/demo)

I’ve pulled the CSS reset in to all of these sandboxes, so we should only be seeing what’s written here. 🤞

`padding`

Next comes padding, which extends the element’s area around the content. I often think of this as an outset or an inset, depending on the next point.

By default, browsers are set to box-sizing: content-box; which means that the padding (and border) exists outside the content width or height—so padding is then an outset. But this is often unintuitive and doesn’t fit with most web design patterns, so it is common (very, very common) to instead set this to box-sizing: border-box; —which makes padding (and border) exist inside the content dimensions. Then padding is easier to think of as an inset.

Most CSS resets will do this for you! Like I said, very common.

https://typography-and-interaction-too.github.io/sandbox/box-padding/demo