How to set line height in percent using CSS ?
In this article, we will learn how to set the line height in percent using CSS. Line height is a property of CSS that is used to provide height after every element.
Approach: We will use the line-height property in CSS and set the value using a percentage. The percentage sets the line height in relation to the font size of the element. The final value that is set is determined is by multiplying the element’s computed font size with the given percentage value.
Syntax:
line-height: percent
Example 1: In this example, different percentage values of the line-height are used with the font-size being the same.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
body {
text-align: center;
font-size: 25px;
background-color: lightgreen;
}
div.a {
line-height: 50%;
}
div.b {
line-height: 100%;
}
</ style >
</ head >
< body >
< h1 style = "color:green" >
GeeksForGeeks
</ h1 >
< h3 >line-height: 50%:</ h3 >
< div class = "a" >
This is a paragraph with a
lower line-height.< br >
The line height is here set to 50%.
</ div >
< h3 >line-height: 100%:</ h3 >
< div class = "b" >
This is a paragraph with a
higher line-height.< br >The
line height is here set to 100%.
</ div >
</ body >
</ html >
|
Output:
Example 2: In this example, the same percentage value of the line-height is used with different font-size.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
body {
text-align: center;
font-size: 25px;
background-color: lightgreen;
}
div.a {
font-size: 24px;
line-height: 125%;
}
div.b {
font-size: 48px;
line-height: 125%;
}
</ style >
</ head >
< body >
< h1 style = "color:green" >
GeeksForGeeks
</ h1 >
< h3 >
line-height: 125%,
font-size: 24px
</ h3 >
< div class = "a" >
This is a paragraph with the same
line-height but lower font-size.
< br >The line height is here set
to 125% and font-size is 24px.
</ div >
< h3 >line-height: 125%,
font-size: 48px</ h3 >
< div class = "b" >
This is a paragraph with the same
line-height but higher font-size.
< br >The line height is here set to
125% and font-size is 48px.
</ div >
</ body >
</ html >
|
Output:
Last Updated :
18 Apr, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...