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
Dharma Teja
Courses Plus Student 5,206 Pointscan anyone help me by explaining widths, padding, margins & how to give "%", and "em" in it clearly tq
. widths . heights . margins . padding
1 Answer
Erin Sowards
15,208 PointsAn em is a relative unit of measurement determined by the element's font-size.
body { font-size: 1em; // here, one em is 16 pixels by default }
If you set the margin, the space outside a container, and the padding, the space inside the container, to 1em, then there will be 16 pixels of space inside and outside that container. Going back and changing the font-size on the body will adjust every element on the page to the new size, scaling up or down accordingly. The tricky part comes in when you adjust the font-size within a container, which now determines that container's em size.
A percentage is always relative to its container. A container set to 80%, always takes up 80% of the available width. So the actual width of that container will scale up and down according the size of the viewport.
Setting your font-sizes in % will be relative to the containing block's font-size.
So, font-size: 120% will be 16 x 1.2 = 19.2 pixels only if the container's font-size hasn't been set. If you had changed the font-size on the body element to be 10px, then your calculation would be 10 x 1.2 = 12
Don't know if that helps.
Ludvík Matějíček
12,557 PointsLudvík Matějíček
12,557 PointsHello,
em is a relative size unit, to calculate the em size, just use the following formula: em = pixels / 16 (20px / 16 = 1.25 em)
% is flexible value for html elements. (if you have set your container width 100% and in container you have two elements width 50% it's mean in every browser size elements has same size)
width is css property for html element and can use for many html elements.
height is css property sets the height for html element.
margin is css property set the size of the white space outside border of html element.
padding is css property set the size of the white space inside border of html element.