The Complete Advanced Guide to CSS/

...

/

Understanding Box Sizing

Understanding Box Sizing

"box-sizing: border-box", what's that?

We'll cover the following...

In this lesson I will explain some fundamental concepts with respect to the CSS Box Model.

Consider the following markup:

Press + to interact
<div class="box"></div>

Pretty simple.

Let’s say this .box was styled like so:

Press + to interact
.box {
  width: 200px;
  height: 200px;
  background-color: red;
}

What we have now is a red square. Easy enough

What if we decided we wanted a padding of 100px within this box, like this:

padding: 100px

Here’s what we ...