The line-height property
The line-height property is used to set the height of the line where text or content is appearing.
>>An example of using line-height property
You may set the line height by using the values as normal, a number which is multiplied by the font size, length in pt, px etc, or percentage of the font size.
Following example demonstrates how you can set the height by using above mentioned value types in CSS line-height property.
Example of using line-height
In this example, we will set the height of lines for three elements by using line-height CSS property.
The heading 1 (h1) is given the normal height. Heading 2 (h2) is given the height in number while paragraph’s heading is set by using pixels (px) value in line-height property. See the demo below:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<html>
<head>
<style>
/*Using CSS text*/
h1
{
background-color: #F0F0F0;
color: #355681;
line-height: normal;
}
h2
{
background-color: #355681;
color: white;
line-height: 3;
}
p
{
background-color: #F0F0F0;
color: rgb(000,125,255);
line-height: 60px;
}
</style>
</head>
<body>
<h1>heading 1 with normal line height</h1>
<h2>Heading 2 with number line-height</h2>
<p>Paragraph with pixels line height</p>
</body>
</html>
|
As you can see, the height of different elements made prominent by using background color property along with line-height property.
The line height property of CSS is useful for making the elements look wider than normal or as per UI requirement.
Also see CSS text | CSS text color
Leave A Comment?