CSS line-height

Previous Next

Demo of the different values of the line-height property.

Click the property values below to see the result:

line-height: normal;
line-height: 1;
line-height: 1.6;
line-height: 2;
line-height: 10px;
line-height: 25px;
line-height: 80%;
line-height: 120%;
line-height: 150%;
line-height: 200%;
This example demonstrates different line-heights. You can choose the lineheight by clicking on one of the line-height properties on the left. This text is where you will see the result of the selected line-height property.
This example demonstrates different line-heights. You can choose the lineheight by clicking on one of the line-height properties on the left. This text is where you will see the result of the selected line-height property.
This example demonstrates different line-heights. You can choose the lineheight by clicking on one of the line-height properties on the left. This text is where you will see the result of the selected line-height property.
This example demonstrates different line-heights. You can choose the lineheight by clicking on one of the line-height properties on the left. This text is where you will see the result of the selected line-height property.
This example demonstrates different line-heights. You can choose the lineheight by clicking on one of the line-height properties on the left. This text is where you will see the result of the selected line-height property.
This example demonstrates different line-heights. You can choose the lineheight by clicking on one of the line-height properties on the left. This text is where you will see the result of the selected line-height property.
This example demonstrates different line-heights. You can choose the lineheight by clicking on one of the line-height properties on the left. This text is where you will see the result of the selected line-height property.
This example demonstrates different line-heights. You can choose the lineheight by clicking on one of the line-height properties on the left. This text is where you will see the result of the selected line-height property.
This example demonstrates different line-heights. You can choose the lineheight by clicking on one of the line-height properties on the left. This text is where you will see the result of the selected line-height property.
This example demonstrates different line-heights. You can choose the lineheight by clicking on one of the line-height properties on the left. This text is where you will see the result of the selected line-height property.

Play more with the code in our Tryit yourself editor: Try it Yourself ❯