Question

I understand how to calculate margin-left/padding-left and margin-right/padding-right in a fluid/responsive layout. But what about margin-top/padding-top and margin-bottom/padding-bottom?

For example, I have this code:

header h1{padding:10px 0 0 15px;}

When I convert this to a fluid layout get this:

header h1{padding:10px 0 0 8.823529411765%;}

How do I convert the padding-top? By diving by 16px (the body font size)? When I do that, the result is more than 10px effective.

Answer 1

If you want the margin’s and padding to respond to the size of the font it’s best to use an em for your unit. While complicated due to the inheritance, an em is a typographic unit representing the vertical height of 1 line of text. For more information see Jon Tangerine’s article:

http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

Also, Jon has supplied a px to em conversion table:
http://jontangerine.com/silo/css/pixels-to-ems/

While it’s common to use em’s for things like line-height and margins, you can also use them for literally any property in place of pixels.