Introduction to CSS line height
In CSS line-height property the line is drawn between the line of the text. This property takes values in numeric or percentage values. This property is used for line spacing between the lines of text where by default the browser will create a certain amount of space between lines so that the text is easily readable. In general, this property sets the height between the lines of text. There are some property values that are used in this property such as normal, number, length, percentage (%), initial, inherit, where normal value is the default value.
Working of CSS line-property
In CSS, to specify the line spacing or the space-out text between the two lines of the text. This property does not take any negative values and it has normal as default value.
In general, we can take example for line-height property with general values.
Example:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
div.a {
line-height: 10px;
}
div.b {
line-height: 30px;
}
div.c {
line-height: 0.5cm;
}
div.d {
line-height: 1cm;
}
</style>
</head>
<body>
<h1>The CSS line-height Property</h1>
<div class="a">This is a paragraph uses line-height property.<br>
The line height is set to 10 pixels.</div>
<div class="b">This is a paragraph uses line-height property.<br>
The line height is set to 30 pixels.</div>
<div class="c">This is a paragraph uses line-height property.<br>
The line height is set to 0.5 centimeter.</div>
<div class="d">This is a paragraph uses line-height property.<br>
The line height is set to 1 centimeter.</div>
</body>
</html>Output:
Syntax for line-height property with values:
line-height: normal | number | length | percentage | initial | inherit;
line-height: normal;
line-height: number(4.5);
line-height: length( 2em);
line-height: percentage (23%);
global values like:
line-height: inherit | initial | unset ;So the line-height property can be specified as shown in the above syntax.
The most commonly used values in this property are listed below.
Values:
- normal: usually the browser uses this as the default value and it depends on the users.
- number: this value has multiple of the elements font size and is unitless. This value is most preferable in styling the elements.
- length: This value is used to calculate the height of the line box and units it takes place is em.
- percentage: This value relative to the element’s font size which is multiplied by the elements font size.
Examples of CSS line height
Given below are the examples of the values of the line-property:
Example #1: Normal
Code:
<!DOCTYPE html>
<html>
<head>
<title>Educba training</title>
<style>
.div {
line-height: normal;
background: cyan;
color: black;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:red;">
CSS Line-height property
</h1>
<div class="div">
This line has line-height: normal
</div>
</body>
</html>Output:
Example #2: Number
Code:
<!DOCTYPE html>
<html>
<head>
<title>Educba training</title>
<style>
.div {
line-height: 4.5;
background: cyan;
color: black;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:red;">
CSS Line-height property
</h1>
<div class="div">
This line has line-height: number
</div>
</body>
</html>Output:
Example #3: Length
Code:
<!DOCTYPE html>
<html>
<head>
<title>Educba training</title>
<style>
.div {
line-height: 0.4em;
background: cyan;
color: black;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:red;">
CSS Line-height property
</h1>
<div class="div">
This line has line-height: length
</div>
</body>
</html>Output:
Example #4: Percentage
Code:
<!DOCTYPE html>
<html>
<head>
<title>Educba training</title>
<style>
.div {
line-height: 400%;
background: cyan;
color: black;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:red;">
CSS Line-height property
</h1>
<div class="div">
This line has line-height: percentage
</div>
</body>
</html>Output:
From the above examples, we can see all different values which can be used in the line-height property.
In the above examples we have to note that the value “number” is better than value “length” and why we will see in the below example:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Educba training</title>
<style>
.num {
line-height: 2.2;
border: solid red;
}
.len {
line-height: 2.2em;
border: solid green;
}
.box {
width: 18em;
display: inline-block;
vertical-align: top;
font-size: 15px;
}
h1{
font-size: 40px;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:red;">
CSS Line-height property
</h1>
<div class="box num">
<h1>This line has line-height: number.</h1> This line-height property is better than the length value.
</div>
<div class= "box len">
<h1>This line has line-height: length.</h1> This value also have other display and hence number value is better than length value.
</div>
</body>
</html>Output:
In the above program, we can see that the first box with a red border uses line-height property with value number and the second box with green border uses line-height property with value length. The first box is declared unitless number and the second box has the unit in “em”. So from the output, we can see that the number value is more clear and readable whereas if we use length which has an “em” unit will have less line spacing and which may lead to confusion or unrecognizable texts which makes it less useable for the users. Therefore we use line-height property with value number which is unitless and is more preferable than length value with unit “em”.
This line-height property of CSS is not supported by all browsers but there are few browsers that support this property and they are: Google Chrome, Opera, Internet Explorer, Firefox, Apple Safari, etc. We should also note that not all versions of these browsers support this property there are latest versions or some particular versions of these browsers support the line-height property of CSS.
Conclusion
In this article we conclude that the line-height property of CSS is used for the amount of space that should be there between two baselines. In general, this property is used for line spacing style for the elements using this property in CSS. This line-height property has different values and it takes normal as default value for the line height between the lines of the texts or blocks of elements. Values taken by this line-height property are normal which is default value, number value which is unitless number, length which has unit in “em”, percentage has the value in unit % for the thickness between the lines.
Recommended Articles
This is a guide to CSS line height. Here we discuss the introduction to CSS line-property along with working and examples respectively. You may also have a look at the following articles to learn more –
