the box model

While we're talking about width, we should talk about width's big caveat: the box model. When you set the width of an element, the element can actually appear bigger than what you set: the element's border and padding will stretch out the element beyond the specified width. Look at the following example, where two elements with the same width value end up different sizes in the result.

.simple {
width: 500px;
margin: 20px auto;
}

.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border-width: 10px;
}

For generations, the solution to this problem has been extra math. CSS authors have always just written a smaller width value than what they wanted, subtracting out the padding and border. Thankfully, you don't have to do that anymore...