Line Height

CSS provides the ability to adjust the line height between lines of text. In other words, when creating a web page or blog, you can specify the space between each line of text. In desktop publishing circles, this is known as "leading". This article shows you how to adjust the line height in your HTML documents.

To adjust the line height of your text, you need to use the CSS line-height property. The value that you provide determines the line height - the space between each line.

Below are some examples using different values for the line-height property.

Line Height Examples

Here are examples of the different value types that you can specify on the line-height property. For example, if you write line-height:30px, you are specifying that the line height should be 30 pixels.

Source Code

Result

<!-- Codes by HTMLcodes.me --> <p style="width:180px;float:left;background-color:#ffc;">Normal text: This text does not have its line height specified. Therefore it uses a default value.</p> <p style="line-height:30px;width:180px;float:right;background-color:#eee;">Adjusted line-height: This text has got a line-height value of 30 pixels.</p> <p style="line-height:1.5em;width:180px;float:left;background-color:#eee;">Adjusted line-height: This text has got a line-height value of 1.5em.</p> <p style="line-height:130%;width:180px;float:right;background-color:#eee;">Adjusted line-height: This text has got a line-height value of 130 percent.</p> <p style="line-height:2.8;width:180px;float:left;background-color:#eee;">Adjusted line-height: This text has got a line-height value of 2.8.</p> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/text/line-height.cfm">HTML line height</a></p>

Normal text: This text does not have its line height specified. Therefore it uses a default value. Adjusted line-height: This text has got a line-height value of 30 pixels. Adjusted line-height: This text has got a line-height value of 1.5em. Adjusted line-height: This text has got a line-height value of 130 percent. Adjusted line-height: This text has got a line-height value of 2.8.