Menu
Anyone knows about it?
284
Height is the vertical measurement of the container, for example, height of a div. Line-height is a CSS property to specify the line height i.e. the distance from the top of the first line of text to the top of the second. It is the space between the lines of two paragraphs.
Google runs a 1.5 line height for its body there, or 16px font size and a line-height of 24px.
The line-height property in CSS controls the space between lines of text. It is often set in a unitless value (e.g. line-height: 1.4; ) so that it is proportional to the font-size. It's a vital property for typographic control.
While there is no perfect line height, a good rule of thumb is to set it at approximately 150% of the font size. While there is no perfect line height, a good rule of thumb is to set it at approximately 150% of the font size.
Short version: line-height: 150% is static, line-height: 1.5 is dynamic. The effect is more evident on inheriting elements. An example:
HTML
<div style="font-size: 12px">
<span style="font-size: 24px">test</span>
</div>
This CSS
div { line-height: 150%; } /* Computed line-height: 18px (150% * 12px) */
span { } /* Computed line-height: 18px (inherited directly) */
As opposed to this:
div { line-height: 1.5 } /* Computed line-height: 18px (1.5 * 12px) */
span { } /* Computed line-height: 36px (1.5 * 24px) */
You may read more at the CSS2 specs page
65
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
