Vertical spacing for grids

First, I would like to say hello as I have just registered! I’m building my first site with 960gs and I started using the style.css from HTML5 Boilerplate over the one in 960gs. I would like to understand what is the best way to force a specific vertical spacing across browsers, across different body font-families.

My problem is that I found out that for nested grids, most of the grid systems becomes unreliable. I found out to be the most reliable. But still, even with every little change in the body font-style effect the overall design, mostly the vertical spacing between grids. For the design I’m working on, both vertical and horizontal spacing needs to be exactly 5px.

I figured out that the body font-family and line-height has an effect on vertical spacing. But it means that when I change something in body font-family it ruins my site. A line-height change and again. I ended up not defining any font at body level (other than the sans-serif line in H5BP).

Can someone please explain what is the best way to make sure that the vertical spacing between grids doesn’t change between edits/browsers? And that why is this line in a way it is?

body { font:13px/1.231 sans-serif; *font-size:small; } /* hack retained to preserve specificity */ 

body, select, input, textarea { /* set your base font here, to apply evenly */   /* font-family: Georgia, serif;  */  } 

Please, have a look at my design (font rotation is dev only).
I ended up putting “line-height: 19px” in “body, select, input, textarea”, and this way the spacing is a nice 5x5 grid in every modern browser. But of course IE6,7 is an exception. But I still don’t understand why does font-family affects grid spacing and that what would be the most “clean” way to solve my problem.

As of now, it’s a bit clumsy:

  1. font:13px/1.231
  2. line-height: 19px
  3. no body font specified
  4. IE specific line-height?