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:
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;
- }
The line-height property also takes a fixed value in pixels, ems, and other units of measurement.
- p{
- line-height: 30px;
- }
Finally, the property takes a percentage value. This will set the line-height to a percentage of the font-size.
- p{
- line-height: 20%;
- }
Now that you have a handle on how exactly the line-height property works, try using it in your next project!