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

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

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

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

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.

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