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

Jeffrey Bulman
PLUS
Jeffrey Bulman
Courses Plus Student 1,747 Points

Why are there so many different ways to measure margin and padding or font size ?

So i am currently getting the hang of this padding and margin stuff. I made a mistake and used pixels as a measurement when i should have used a percentage as a measurement. The pictures seemed to be spaced well on desk top level but when i minimized my window the pictures were still on top of each other so the {float:left;} property did not work. So i changed the pixel measurement to a percentage and everything seemed to sort it's self out and looked grate on the desktop layout and the mobile layout. Why is this so ?

3 Answers

Chase Lee
Chase Lee
29,275 Points

This happens because percentages do a certain length, (or percentage), of the page. So lets say that your page is 500px high, and you set your picture measurement to 10%, that will give you 50px. Now lets say that your height had been expanded to 3980px, your new picture measurement will now be 398px.

So basically percentages make whatever you apply it to a certian size based off of the page size.

Does that all make sense?

-Chase

Because when you use an absolute value, like pixels, the variable stays absolute. It won't take into consideration screen size or anything else, unless there's additional code telling it to do so, because it's been told to be this one size. Period.

Percentages allow the website to detect and compensate for the screen size on which it's being viewed. Nick gets into this a lot more in the subsection on Responsive Web Design and Testing. I won't get into things like media queries, because he'll be explaining that all shortly, assuming you're continuing on the How To Create a Website lesson group.

Things will be coming together shortly, just stick with the lessons!