Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Basic Layout box-sizing and max-width

Jong Kim
Jong Kim
6,145 Points

Since we have width or height, why do we need padding?

Why do we need padding if we had width and box-sizing?

2 Answers

Mike Hatch
Mike Hatch
14,940 Points

Because width and height is only applied to the content area of the box. Outside of that you then have padding, border and margin.

Source: Guil Hernandez - Take Control of the Box Model with box-sizing

Omar Jimenez
Omar Jimenez
1,446 Points

Isn't the area around the content the padding? This confuses me.

Mike Hatch
Mike Hatch
14,940 Points

Omar Jimenez, the article I provided in my Answer back on Jun 14 describes it in detail. The area around the content is more than padding. Here is an image from Guil's article:

Image of Box Model

The above image doesn't provide the margin area, so I've also included one that does from Firebug:

Image of Box Model - Margin

The "Content" area is where it says 267 x 24.

Omar Jimenez
Omar Jimenez
1,446 Points

Mike Hatch thanks a lot buddy. I just read the article. Now I know why and how to use it.