user6867266 user6867266 - 2 months ago 12
CSS Question

is there a simple css property to set line-height with no buffer?

Is there a simple css property to set line-height with no buffer? The css line-height css property can be used to control the space above and below the text on a line. However, eliminating the buffer seems to be a matter of trial and error and tweaking with the line-height property. Does css support a simple property to remove this space without the trial and error? Something like
a line-height-buffer:none property?

Answer

If you set line-height to the size of the font (for example 16px), the only space above and below the line can be caused by padding and/or margin. So if you use settings like these

p { 
  font-size: 14px;
  line-height: 14px;
  padding: 0;
  margin: 0;
}

, there will be no space between the lines.

But keep in mind that only certain letters reach the full height of the line - a "g" stretches below the baseline (not to be confused with line), but not up, an "f" might reach the top (and not the bottom) - that always depends on the used font.

P.S.: Instead of using the font-size value, you can also write

line-height: 100%;