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

Konrad Dziekonski
Konrad Dziekonski
7,798 Points

scaling in px and %

Hi

I have just tried and it looks that no matter if we set padding in px or % the browser rescales the div in the same way, could You explain furter what is a good practice and when to use which? Thanks

2 Answers

Steven Parker
Steven Parker
218,639 Points

If these units look the same, then the containing element of the one you're setting must just happen to be about 100 pixels wide.

And you'd typically choose px units if you want a consistent size for something, and a percentage unit if you wanted it to adapt to the size of its parent element (which might possibly be relative to the window size).

KAMRAN IMRANLI
KAMRAN IMRANLI
4,107 Points

Steven Parker So Guil mentions that when we set the padding in percentages, for example, 50%, it takes the 50% of the width of the container. And when I make it 100% it becomes the whole browser window. So does this mean that the percentage value is related to the width of the browser window but not the width of the container?

Steven Parker
Steven Parker
218,639 Points

The percentage is relative to the parent container. If 100% makes it the whole browser window then the parent element must already be that size.