Welcome to Our Free Tutorial!

CSS - Line Height

This property specify the line of the height in line element box. The line height property similar to the leading desktop publishing.

Syntax:- line-height: <value>;
Values:- normal- a normal line height. This is default.
<length>:- exp 15px,pt,cm,etc.
<Number>:- exp: 5
<percentage>:- exp-120%, the line height in the percentage.
Initial value:- Normal.

This property specify the space between the lines in a paragraph with using pixel value.


<html>
<head>
<style type="text/css">
p.small
{
line-height: 12px
}
p.big
{
line-height: 35px
}
</style>
</head>
<body>

<p>
This is a paragraph with a Default line-height.
The default line height in most browsers is about 20px.
This is a paragraph with a Default line-height.
The default line height in most browsers is about 20px.
</p>

<p class="small">
This paragraph with a small line-height.
This paragraph with a small line-height.
This paragraph with a small line-height.
This paragraph with a small line-height.
</p>

<p class="big">
This paragraph with a big line-height.
This paragraph with a big line-height.
This paragraph with a big line-height.
This paragraph with a big line-height.
</p>

</body>
</html>

This property specify the space between the lines in a paragraph with using number value.


<html>
<head>
<style type="text/css">
p.small
{
line-height: 0.5
}
p.big
{
line-height: 2
}
</style>
</head>
<body>

<p>
This is a paragraph with a Default line-height.
The default line height in browsers is "1".
This is a paragraph with a Default line-height.
This is a paragraph with a Default line-height.
</p>

<p class="small">
This paragraph with a small line-height.
This paragraph with a small line-height.
This paragraph with a small line-height.
This paragraph with a small line-height.
</p>

 <p class="big">
This paragraph with a big line-height.
This paragraph with a big line-height.
This paragraph with a big line-height.
This paragraph with a big line-height.
</p>

</body>
</html>