Ways to use CSS line height with example

The line-height property

The line-height property is used to set the height of the line where text or content is appearing.

>>An example of using line-height property

You may set the line height by using the values as normal, a number which is multiplied by the font size, length in pt, px etc, or percentage of the font size.

Following example demonstrates how you can set the height by using above mentioned value types in CSS line-height property.

Example of using line-height

In this example, we will set the height of lines for three elements by using line-height CSS property.

The heading 1 (h1) is given the normal height. Heading 2 (h2) is given the height in number while paragraph’s heading is set by using pixels (px) value in line-height property. See the demo below:

Experience this example online

As you can see, the height of different elements made prominent by using background color property along with line-height property.

The line height property of CSS is useful for making the elements look wider than normal or as per UI requirement.

Also see CSS text | CSS text color

Was this article helpful?

Related Articles

Leave A Comment?