Question

we have the following code:
http://jsfiddle.net/DVwmJ/

As you can see, the green line is 4px after the red line (we do not expect this).
Anyone know why if I uncomment the “display:block” css declaration for the span element the lines overlap (as expected)?

Thanks in advance

Answer 1

Without display: block, the span remains an inline element. The extra 4 pixels of height comes from the space left for descenders in letters. An observation: if you change the font-size, the amount of extra height also changes.

If you didn’t want to specify display: block, you could set vertical-align: top, which is different to the default of vertical-align: baseline.