Can CSS line-height be set directly to a number without a unit?
Can CSS line-height be set directly as a number without a unit?
In CSS, the line-height property is used to set the line height, or the height of the line box. Typically, we use numerical values with units, such as px, em, and rem. However, some may wonder if it’s possible to set a unitless number directly as the line-height value. This article will explore this issue in detail.
What is line-height?
Before we delve into whether line-height can be set directly as a number without a unit, let’s first understand the concept of line-height.
The line-height property in CSS is used to set the line height. It affects the height of a line of text and, consequently, its vertical alignment. Typically, we use a numerical value with a unit, such as px, em, or rem. For example:
p {
line-height: 1.5;
}
The above code sets the line height of the paragraph to 1.5 times the line height.
Can line-height be set directly as a number without a unit?
Now let’s explore whether it’s possible to set line-height as a number without a unit. The CSS specification doesn’t explicitly state whether line-height can be set directly as a number without a unit, but based on actual testing and browser performance, we can draw the following conclusions:
- In most cases, you can set line-height as a number without a unit; the browser will interpret it as a multiple of the font size.
- However, in some special cases, setting a number without a unit may lead to unexpected results. Therefore, it’s recommended to use a number with a unit when setting line-height.
Next, let’s verify this conclusion with some example code.
Example 1: Directly setting line-height to a number without a unit
p {
font-size: 16px;
line-height: 1.5;
}
In this example, we directly set line-height to 1.5 without a unit. Next, let’s create a paragraph to test this style:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test line-height</title>
<style>
p {
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<p>geek-docs.com</p>
</body>
</html>
Output:
Opening this page in a browser, we can see that the paragraph line height is set to 1.5 times the font size.
Example 2: Directly setting numbers without units may lead to unexpected results
p {
font-size: 16px;
line-height: 2;
}
In this example, we directly set the line-height to 2 without a unit. Next, let’s create a paragraph to test this style:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test line-height</title>
<style>
p {
font-size: 16px;
line-height: 2;
}
</style>
</head>
<body>
<p>geek-docs.com</p>
</body>
</html>
Output:
Opening this page in a browser, we can see that the paragraph’s line height is set to twice the font size. However, this approach may lead to unexpected results, so it is recommended to use a numeric value with a unit when setting line-height.
Summary
Through testing the above sample code, we can conclude that in most cases, setting a unitless number as the line-height value is acceptable; the browser will interpret it as a multiple of the font size. However, in some special cases, setting a unitless number directly may lead to unexpected results, so it is recommended to use a numeric value with a unit when setting line-height.