CSS Line Height - bottom only
===

Ok, I am quite new to frontend development so please be nice if this is a dumb question :)

When applying line height to an element say an h1, the line height applies extra space to both the top and bottom of that element.

This kind of makes sense, but i only want line height to be applied to the bottom of the element so the tops of my h1, h2 etc can be alined perfectly with other elements.

This jsfiddle shows the problem:  http://jsfiddle.net/zja4c/1/

This jsfiddle shows what i want to achieve but am forced to use negative margins: http://jsfiddle.net/25UTA/

The h1 with background colour of red aligns correctly to the top of the left div, but the text doesnt.

My question is therefore, is there a way to:

 1. Apply line height to only the bottom of an element or, 
    
 2. Align an element to the top of the space created by applying line height somehow

