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
Yasin Atagün
4,691 PointsAbout margin there is a question.
In video it creaated a margin with 2.5% value. but i have to know, why we dont use pixels or ems for margin ?
3 Answers
Kevin Marshall
3,561 PointsWhen you are using pixels you are setting a strict guideline for how something will be margined. It is better to use the percentages because then the page will look the same on a screen with greater pixel area or smaller such as a mobile device. You want the view to be dependent on the pixels available rather than an amount that can change the way it looks across devices.
Ana Gledovic
7,465 PointsHey Yasin, px is an absolute unit of measurement, and if you want to make a responsive page - it is much better to use % for margin, padding, width, height... Em is used for font sizes.
Yasin Atagün
4,691 PointsThank you. Im trying to find out how we gonna set margin or padding with %s. I mean if we use pixels, i know it gonn be what i said. but how long is 5% or 1% .. and the "%" we used in this values is what items % s :) i hope u understand my question. in other way; 100 apples %13 is 13 apple. but whatt is 5% of margin.?
Ana Gledovic
7,465 PointsAha, ok. So, the formula is TARGET / CONTEXT = RESULT. You have to be careful what is your context, for example: container is 960px and you want to make columns of 225px inside that container 225px / 960px = 0.234375, then multiply that with 100 and you will get 23.4375%. I always put in comment original pixel size.
Yasin Atagün
4,691 PointsThanks a lot. Your formula is so smart and easy to understand.
Jeremy Woodbridge
25,278 PointsPercentages, em's and other relative values are based off root values to elements. To put it more simply you want to use values that are more scalable which makes it easier to design your website for a mobile version first then tablets and desktops last. It's good practice when building scalable sites
Yasin Atagün
4,691 PointsYasin Atagün
4,691 PointsWhen this course explain pixels vs em i understand it. But how could we say what is 1% or 5% or 100% on margin ? how it affect the design.
Kevin Marshall
3,561 PointsKevin Marshall
3,561 PointsThe screen has some amount of space available to it in pixels. It could be 1000 or 1500px. When you specify a margin in pixels, lets say 100px, on a screen 1500 pixels available you have the margin at 100 and 1400px after. If you bring up that same page on your phone, with say 500px, that margin of 100px is taking up a lot more of your space and you only have 400px after the margin.
When you use a percentage instead for your margin you ensure the space is the same relative the amount of space you have available. A margin of 10% will be 150px on 1500px and 50px on a 500px screen. This creates margins that will look the same on any screen.
Yasin Atagün
4,691 PointsYasin Atagün
4,691 PointsThanks a lot. I understand it easly. By the way, is there any button for following specific forum topic ? i mean i want to see questions if there is a new question on forum. You answered me really fast and i want to help people if i can..