What is line-height:1?

Go To StackoverFlow.com

29

It is a question about the appointment of line-height.

I began study of css. line-height: Examples appointing 20px or a unit are often found. It is sometimes line-height: There are 1 and a thing without a unit, but what kind of meaning does this become?

2009-06-16 09:22
by freddiefujiwara
https://developer.mozilla.org/en/docs/Web/CSS/line-height#Value - Adrien Be 2016-02-25 06:13


31

Possible Values

number :

Sets a number that will be multiplied with the current font-size to set the distance between the lines

length :

Sets a fixed distance between the lines

% :

Sets a distance between the lines in % of the current font size

take from http://www.w3schools.com/css/pr_dim_line-height.asp

2009-06-16 09:27
by Haim Evgi
If setting the line-height without a unit, the result is the line-height value multiplied by the element’s font-size. The line-height property can accept unitless values. This is a good article detailing the line-height property - Nesha Zoric 2018-02-28 07:42


8

It seems that line-height doesn't need a unit (detailled article).

The property line-height can accept unitless number values. You can also give line-height united values, though generally you shouldn’t. But unitless numbers are just fine for this property.

2009-06-16 09:27
by instanceof me
Nice article! + - Blixt 2009-06-16 09:31
Thank you! That really explains it--and lots of perplexing weirdness with my websites! Yay - Scott Biggs 2013-04-04 04:28


7

Also note: "1" does not equal "normal" - 1 is exactly the same height as the font-size, so the lines in a multi-line element such as a paragraph will be snug up against each other, while normal adds the expected spacing between the lines.

Using the font shorthand:

font: font-style font-variant font-weight font-size/line-height font-family;

appears to default the line-height to normal if it isn't specified. For example:

body{
    line-height:1; /* as seen in Eric Meyer's reset css */
}
p{
    font:normal normal normal 14px "Times New Roman", Times, serif;
}

will result in all paragraphs having a normal line-height, overriding the 1 set for the body, while

p{
    font:normal normal normal 14px/1 "Times New Roman", Times, serif;
}

will retain the line-height of 1 (which in this example would be 14px).

2013-01-21 19:31
by George Langley


4

According to w3schools and w3.org line-height:1; is valid and means the following: Sets a number that will be multiplied with the current font-size to set the distance between the lines.

2009-06-16 09:28
by merkuro
same as line-height:1em; - typeoneerror 2010-06-30 06:18
In effect, yes - mahalie 2011-10-22 01:26


2

If no unit is supplied e.g. "line-height: 1.5" the distance between the lines is set as this number multiplied with the current font size.

1.5 x font-size

2009-06-16 09:27
by jitter


1

It's a multiple of the font size. From the CSS 2.1 Candidate recommendation: »The used value of the property is this number multiplied by the element's font size.«

2009-06-16 09:29
by Joey