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

Posted by sam devos
sam devos
3,644 Points

Build Resposive website course : padding's in percentages???

Hey, something i don't understand about the responsive aprouch is :

whats have to be in percentages?

the attaced css file sets all margins in percentages , the padding in pixels except for the copyright one??? . why particulary that one? i don't have a clue.

#copyright {
border-top: 8px solid #2a0400;
padding: 2% 0;
margin: 2% 0;
text-align: center;
}
.btn {
padding: 15px 30px;
color: #faf3bc;
background: #4fb69f url('img/texture.png') no-repeat right top;
border-radius: 25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
text-transform: uppercase;
}

3 Answers

Riley Bracken
Riley Bracken
16,762 Points
Riley Bracken
Riley Bracken
16,762 Points

I think you mean that the border-top is not a percentage. The reason this is in pixels is because border does not except a percentage as a value.

But then that raises the question, if things should add up to 100%, what happens to the border? Here is some reading that I would take a look at to help you wrap your head around it (including the team treehouse course).

Team Treehouse, CSS-Tricks, Box Sizing Trick

sam devos
sam devos
3,644 Points

no no you misunderstood me i really ment the padding property :

copyright {

padding: 2% 0; }

.btn { padding: 15px 30px; }

you see why use this time percentages , then the other time pixels? i know that box sizing border box doenst look after the padding or margins. :)

Paul Graham
Paul Graham
1,396 Points
Paul Graham
Paul Graham
1,396 Points

Think about the box model.

http://css-tricks.com/the-css-box-model/

Let's give a common scenario. You wish to keep a box, let's in this case say a div, positioned proportionally in the layout. This box has a background color. You would want the margins to scale proportionally to the container or the screen but to have the background distance from the text inside the box to be fixed.

This would almost always be the case. If you're using percentages to handle width and margins, you don't need to proportionally manage padding because it's inside the box. You likely want to also set box-sizing: border-box universally or at least on all block elements, it makes this stuff a lot more easy to manage. http://www.paulirish.com/2012/box-sizing-border-box-ftw/

sam devos
sam devos
3,644 Points

ok so i don't need to set paddings in % then from what i understand.

i hope there's a general rule for it ; Because in the course i had to convert all the paddings from px into percentages (quiz with the cake filling divs) which make me wonder then why.

Paul Graham
Paul Graham
1,396 Points

Could be practice, not sure. Oftentimes you want to set padding relative to the text size, but you'd use ems for that. There might be edge cases where padding in percent could solve a problem you're having but most times if you're using padding as a positional thing, that should scream bad CSS hack to you and should be avoided. Padding is almost always related to text measure, so if your text is set in pixels, your padding probably will be too. If the text is set in ems or rems, the padding will usually be set in ems or rems.

Derek Hanson
Derek Hanson
7,838 Points
Derek Hanson
Derek Hanson
7,838 Points

Percentage or pixels?

I think they are showing you how to move away from pixels to a responsive design that shrinks or grows depending on the browser size. For me, I learned a lot of CSS with pixels and pt and it has moved away from pixels to em and % . So you might just be reading into the test example a little to much.

However, CSS standards or W3 standards has come to agree that pixels for the most part is the least agreed method for creating your positioning or just about anything for your CSS. Not that you can't use them but they are not best when there are many screen sizes. So having a flexible layout with em or percentages allows the design to be readable and user friendly from a design perspective across many platforms.