Question

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

I understand that this may not be possible but 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

Answer 1

Using line-height is your only option if you wish to maintain proper spacing across line-breaks. Padding will occur on the bottom of the block-level H1 element, as you pointed out. I think negative margins are your best bet, but you’ll have to fine-tune it line up perfectly with a 50px line-height:

http://jsfiddle.net/25UTA/1/

If negative margins can’t be used for some reason, you can use relative positioning and a negative top value to achieve a similar effect.

http://jsfiddle.net/25UTA/2/

Using em‘s or percentage font-sizes and line-heights might make this eaiser.