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) The Box Model Padding

Posted by Andrei Li
Andrei Li
34,475 Points

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,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 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.

Andrei Li
Andrei Li
34,475 Points

Thank you for a very detailed explanation.

B.B. Groeneveld
B.B. Groeneveld
2,826 Points

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

Manne M
Manne M
2,494 Points
Manne M
Manne M
2,494 Points

@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.

B.B. Groeneveld
B.B. Groeneveld
2,826 Points

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