CSS: line-height property
This CSS tutorial explains how to use the CSS property called line-height with syntax and examples.
Description
The CSS line-height property defines the height used in the calculation of the line box height for an inline element, and defines the minimal height of the line box for a block level element.
Syntax
The syntax for the line-height CSS property is:
line-height: value;
Parameters or Arguments
- value
The height used in the calculation of the line box height for an inline element, and the minimal height of the line box for a block level element. It can be one of the following:
Value Description normal Normal value used by browsers
div { line-height: normal; }number Unitless number value that is multiplied by the element's font size
div { line-height: 1.5; }fixed Fixed value expressed in pt, em, ...
div { line-height: 12pt; }
div { line-height: 1.5em; }percentage Percentage value
div { line-height: 150%; }none No line-height is applied to the element
div { line-height: none; }inherit Element will inherit the line-height from its parent element
div { line-height: inherit; }
Note
- Percentage and em values may result in poor inheritance behavior and should probably not be used. It is preferable to use a unitless number value instead (such as 1.5).
- When the value is provided as a percentage, it is relative to the font size of the element itself.
Browser Compatibility
The CSS line-height property has basic support with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- IE Phone
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Example
We will discuss the line-height property below, exploring examples of how to use this property in CSS with a fixed value as well as a percentage value.
Using Normal
Let's look at how to set the line-height to normal.
div { line-height: normal; }
This would be the default value used by browsers. You might find yourself in a situation where the line-height has been changed and you wish to change it back to its default behavior.
Using Number Value
Let's look at an example where we have provided the line-height as a number value with no units.
div { line-height: 1.2; }
In this CSS line-height example, we have provided a value of 1.2. This value is a unitless number that would be multiplied by the element's font-size to calculate the line box height.
Using Fixed Value
Let's look at a CSS example where we have provided the line-height as a fixed value expressed in pixels.
div { line-height: 35px; }
In this CSS line-height example, we have set the line-height to 35px.
We can also express the line-height as a fixed value in em's.
div { line-height: 2em; }
In this example, we have set the line-height to 2em.
Using Percentage
Let's look at an example where we have provided the line-height as a percentage.
div { line-height: 125% }
In this CSS height example, we have set the line-height to 125%.
Advertisements