CSS - line-height Property
The line-height property modifies the height of the inline boxes which make up a line of text.
Possible Values
normal − Directs the browser to set the height of lines in the element to a "reasonable" distance.
number − The actual height of lines in the element is this value multiplied by the font-size of the element.
length − The height of lines in the element is the value given.
percentage − The height of lines in the element is calculated as a percentage of the element's font-size.
initial − Sets the value of line-height to its default value.
inherit − The value of line-height is inherited from its parent value.
Applies to
All the HTML elements.
DOM Syntax
object.style.lineHeight = "15px;"
CSS line-height Example
Following is the example −
<html> <head> <style> div.a { line-height: 2in; font-size: 10pt; background-color: rgb(188, 201, 238); margin-bottom: 2px; } div.b { line-height: 100px; font-size: 10pt; background-color: rgb(230, 235, 185); margin-bottom: 2px; } div.c { line-height: 5; font-size: 10pt; background-color: rgb(231, 174, 218); margin-bottom: 5px; } div.d { line-height: normal; font-size: 10pt; background-color: rgb(205, 149, 141); margin-bottom: 2px; } </style> </head> <body> <div class="a">This div element has a line-height set as 2inches.</div> <div class="b">This div element has a line-height set as 100px.</div> <div class="c">This div element has a line-height set as number 5.</div> <div class="d">This div element has a line-height set as normal.</div> </body> </html>
Advertisements
To Continue Learning Please Login
Login with Google