line-height Examples

Examples of How to Use the CSS Property line-height

Return to the line-height information.

Setting Basic Line Height

Ut labore et dolore magna aliqua. Eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt consectetur adipisicing elit. Sunt in culpa excepteur sint occaecat ullamco laboris nisi. Qui officia deserunt duis aute irure dolor sed do eiusmod tempor incididunt.

<p style="font-size:1em; line-height:1.2em;">Ut labore et dolore magna aliqua. Eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt consectetur adipisicing elit. Sunt in culpa excepteur sint occaecat ullamco laboris nisi. Qui officia deserunt duis aute irure dolor sed do eiusmod tempor incididunt. </p>

Return to the line-height information.

Extra Tall Line Height

Ut labore et dolore magna aliqua. Eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt consectetur adipisicing elit. Sunt in culpa excepteur sint occaecat ullamco laboris nisi. Qui officia deserunt duis aute irure dolor sed do eiusmod tempor incididunt.

<p style="font-size:1em; line-height:2em;">Ut labore et dolore magna aliqua. Eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt consectetur adipisicing elit. Sunt in culpa excepteur sint occaecat ullamco laboris nisi. Qui officia deserunt duis aute irure dolor sed do eiusmod tempor incididunt. </p>

Return to the line-height information.

Extra Short Line Height

Ut labore et dolore magna aliqua. Eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt consectetur adipisicing elit. Sunt in culpa excepteur sint occaecat ullamco laboris nisi. Qui officia deserunt duis aute irure dolor sed do eiusmod tempor incididunt.

<p style="font-size:1em; line-height:0.8em;">Ut labore et dolore magna aliqua. Eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt consectetur adipisicing elit. Sunt in culpa excepteur sint occaecat ullamco laboris nisi. Qui officia deserunt duis aute irure dolor sed do eiusmod tempor incididunt. </p>

Return to the line-height information.