Every day scenario, imagine I want
[h1] [h2] [p] [p]
I specify a base font size for the container, the p is 1em, the h2 is 1.5em, and h1 2em.
Now I want the spaces between each element to be the same (1em for example), the h1 is simple- I can use .5em as (n * 2) * .5 = n.
I understand that these measurements are based on the font-size, so are there any good tricks to doing this?
So far the only options I can see are: set the margin explicitely to the size of the container (fragile), or have no margins on the headers, and wrap the headers in another element (like a div) with 1em margins.
Any less hacky ways to do this?
I'm not sure I can explain things better than this article, which I think is what you're asking for: http://24ways.org/2006/compose-to-a-vertical-rhythm
You might try this px to em lookup chart I created. Also, keep in mind that line-height comes into play here as well.