%
- Started
- Last post
- 6 Responses
- qoob
What happens when you set the margin as a percentage in CSS? For instance, margin-top:10%.
Does it compute it as 10% of the height of the object, 10% of the page, or what? And is this the same in all browsers.
- BabySnakes0
10% of the elements parent set height. and should be the same cross browser.
- qoob0
I think that's wrong - at least, I tried it and the numbers don't add up for me
- IRNlun60
It's based on context.
On an h2 with a base font size of 16px (1em), and a line-height of 18px (1.125em); setting a 10% top margin is equal to 10% of 16px or 1.6px. I prefer setting the margin on a base line-height to help in managing the vertical rhythm. So 18px top margin / 16px base font size = 1.125em.
If you have a div with no set height, then the context is the total of all borders, margins, paddings, font size, line-height, total line numbers, etc... of children in parent. If you have a set height size for container then the height of the container is the context.
10% of 64px height container = 6.4px
- qoob0
"10% of 64px height container = 6.4px"
Have you tried this in practice? It sounds logical enough but doesn't seem to work.
- dbloc0
does anyone actually use percent for font size/line height?
- qoob0
OK, I figured it out. Strangely enough, turns out it uses the WIDTH of the parent element to calculate margin-top and margin-bottom when set as a percentage:
http://www.w3.org/TR/CSS2/box.ht…
Totally nonsensical, sometimes I question whoever it is that comes up with this stuff :P