In an effort to create more responsive web sites, I'm finally learning the ins and outs of flexible sites.

One question that has me stumped right at the get-go is how to have a flexible bottom margin to <p> and heading tags. In the past, I have reset <p> and heading tags to zero margin and padding. Then, later in the style sheet, I set the bottom margin to whatever is appropriate. So, if I might do something like this:

p { font-size:14px; margin-bottom:16px; }
h1 { font-size:18px; margin-bottom:26px; }
Now that my fonts are specified in ems, how do I set the bottom margin? Percent? Something like this?

p { font-size: .875em; margin-bottom: 143% }
h1 { font-size: 1.125em; margin-bottom: 144% }
(Although I'm sure my math is wrong, I got my numbers using Ethan Marcotte's target/context=result.)

I did a lot of googling about this yesterday, and was very surprised I wasn't able to find my answer. So I'd also like to ask if there are any good resource sites out there yet for responsive web design.

And finally, is there a way to make a font's size relative to the body element rather than its parent element? Having to keep track of that might drive me bonkers.