Menu
The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element.
The default line height in most browsers is about 110% to 120%. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a bigger line-height.
The line-height is determined by dividing the targeted line-height size by the font-size. In this example, Bootstrap is baselining their line-height off of a 14px font-size. The target line-height is 20px:
20px ÷ 14px = 1.428571429
When determining your line-height, you want to make sure you have ample white space between your rows. This allows for ascenders and descenders without intruding on other rows. Also having ample white space allows your eyes to develop a visual rhythm while reading.
Also keeping the line-height unitless makes it more versatile. For more information, see Eric Meyer's post on this from February 2006.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With