21

If I give a line-height to a block element like h1 it adds the space above and below the each text line, that means the element does not begin on the same top position. What if I just want a spacing below each line? I know that vertical-align does only work with inline-elements.

I also recognized that a text of a block element like a p tag is not on top with line-height "normal", by default. If I add a background-color to the element, the colour is also visible a few pixels above the text. Why?

Yi Jiang
  • 49,435
  • 16
  • 136
  • 136
m4mpfi
  • 211
  • 1
  • 2
  • 4

2 Answers2

27

TLDR: Use position: relative and a negative top value to fake it.

Explanation: You're right. Line-height is always added above and below each character. So if your font-size is 12px and you have a line-height of 18px, you'll get 3px above and 3px below each "line". Each of those 3px spaces is called a "half-leading".

However, you can use position: relative with a negative top value to make it seem like there is only space added beneath each line.

So lets say you wanted to have 8px of space between each line instead of just 6px from the example above (18px/12px = 6px = 3px on top + 3px on bottom) . To do this, increase the line-height from 18px to 20px to make the half-leading 4px and give a total of 8px of space between lines. Then add position: relative; top: -2px to bump the line back to same place it was when the line-height was 18px.

Even though the browser is still adding 4px of space above and below each line, the negative vertical positioning will make it seem like that extra top spacing was cut off.

timmfin
  • 2,025
  • 1
  • 15
  • 14
  • 1
    I know this is an old answer, but I currently used it with em's and thought I would add some of my input. If you are using em's remember that the height of the text is `1em`. If you set the `line-height` to `1.5em`, you will want to set the `top` to be `-0.5em`. – David Aug 30 '14 at 05:51
  • Actually, you probably want to set top to half of that @David, so it would be -0.25em – chaimp Feb 25 '15 at 04:24
0

What if I just want a spacing below each line?

I don't really see how the accepted answer is any better than this, for most cases:

margin-bottom: .5em

The important thing is to use em since is will be based on the current font size.

In addition note that if the text wraps to two lines and you're using line-height: 2 then you'll end up with a huge gap between the lines. Then you're almost certainly better off using margin-bottom with a default line-height.

Simon_Weaver
  • 140,023
  • 84
  • 646
  • 689
  • Without an appropriate line-height some characters like y, p, g, q etc are cut off at the bottom. So you still need a line-height but even a moderate amount of line-height to reveal the bottom of those characters will add space to the top of the line which is undesirable. If you're negating the top of a line height, you'll still have the bottom spacing which means no need for margin-bottom and it's unlikely to have a huge gap as you would use as much line has as needed to produce a desired gap between two lines. – PeteB Dec 08 '20 at 12:27