How to Use CSS3’s Line-Height Property

Published July 7, 2016 by CSS Newbies.

CSS3’s line-height property is one that is often underrated and misunderstood. The property can be very helpful in styling certain elements, and it can take many different types of values, including number values, pixel values, and percentages. Let’s apply it to this paragraph to see how it works:

Screen Shot 2016-07-07 at 11.18.01 AM

This paragraph has the default line-height value (“normal”). One type of value that the line-height property takes is a number. The number value applied to the text will take the font-size and multiply that by the applied value to set the new line-height. In the example below, the font-size is 16px.

p{

line-height: 3;

}

Screen Shot 2016-07-07 at 11.18.58 AM

The line-height property also takes a fixed value in pixels, ems, and other units of measurement.

p{

line-height: 30px;

}

Screen Shot 2016-07-07 at 11.19.25 AM

Finally, the property takes a percentage value. This will set the line-height to a percentage of the font-size.

p{

line-height: 20%;

}

Screen Shot 2016-07-07 at 11.20.14 AM

Now that you have a handle on how exactly the line-height property works, try using it in your next project!