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?

Cheers.

3 answers

1
point

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

Answered over 7 years ago by Tony Crockford
Andy Ford 533
1
point

You might try this px to em lookup chart I created. Also, keep in mind that line-height comes into play here as well.

Answered over 7 years ago by Andy Ford
1
point

You may want to check out baseline css framework.

Answered over 7 years ago by Divya Manian