Public Voice Network
- GIF vs JIF 44
- TITS GIF 1313
- You're at a party and… 1919
- Famous Street Artists 99
- Pic of the Day 7471174711
- the gif animation thread 1845218452
- What are you listening to… 55795579
- Amy's Baking Company 110110
- LA Life 88
- Star Trek Into Darkness 5858
- Really? 3535
- Tornado season 108108
- iPhone Apps of the Day 9292
- Xbox: New Generation Reve… 6666
- Anywhere in the USA 55
- I ❤ Wood 330330
- CNN Fail of the Day 2727
- Stag Do - London 22
- The Silk Road 1414
- instagram 655655
- blog 5770557705
- San Francisco 1818
- DaftPunk 209209
- Sci-Fi of the Day 9191
% 66 Responses
Last post: 10 months ago | Thread started: Jul 19, 12, 7:41 p.m.
- BabySnakes
10% of the elements parent set height. and should be the same cross browser.

- Dog-earJul 19, 12, 7:51 p.m. – Permalink
- IRNlun6
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


- Dog-earJul 19, 12, 8:19 p.m. – Permalink
- qoob
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


- Dog-earJul 19, 12, 8:38 p.m. – Permalink


