Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Basics (2014) The Box Model Padding

If all is in percents what is the base for dimensions of the padding? Is it content box that defines base for padding?

Or something else?

2 Answers

Aurelian Spodarec
Aurelian Spodarec
10,789 Points

The padding doesn't have to be in %.

I usually make the padding in px.

But it depends what purpose the padding has. You always want to do things with a purpose in mind.

Are you trying to e.g. put padding on the image so it's off the text? Well, in that case I would go with a fixed padding.

Are you doing something awesome or some strange effects? I would probably go with %, but I rarery do.

Gutters, which use margin most of the time, it's good to have a fluid value like %. But if you're building a card, and inside you have a picture, consider using fixed margin or values.

The % is usually made for responsive design, and fixed values more likely yo build components. So in a nav you woudn't do 50%, and have a nav that takes half of the screen, but more likely e.g. margin-bottom: 50px;

Again it depends on how you're building things :)

HOpe this helps somehow.

Thank you for a very detailed explanation.

I still don't get it, where comes the base of the percentages come from?

@b.b. As far as I understand it's based on the width of the "box" you're applying the padding to. The width for this box, if it isn't declared specifically, is I guess 100% of the screen by default? But if this box is for example in a parent element (like a wrapper) that has a specific width, this will influence the maximum width of the box. So then the percentage is relative to the width that is forced by the wrapper. I dunno if my explanation is readable, I believe that's how it works.

Thanks for helping me, I understand now. And no worries, your explanation is clear.