Menu
If I increase the line-height of the span element's content then the space above and below each individual line increases. But if I decrease the line-height below 1 then nothing happens. Following is the code I am trying; I change the values in the inline style attribute of span
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
<span style="line-height: 0.1">
This is a paragraph with a standard line-height.<br>
This is a paragraph with a standard line-height.<br>
</span>
<span>
This is a paragraph with a standard line-height.<br>
This is a paragraph with a standard line-height.<br>
This is a paragraph with a standard line-height.<br>
This is a paragraph with a standard line-height.<br>
</span>
</p>
</body>
</html>
743
Line-height is a multiplier of its font-size. Suppose, if you have set font-size to 12px then the line-height set to 1.5 is equal to 12*1.5=18px.
And the fact about the line-height with block level element works as you expect but with the inline level elements the line-height cannot go below to its font-size. So, setting the line-height below the value of 1 is invalid as 0.5*12=6px which is less than the font-size.
If you want to expect its line-height would work below its font-size then you need to explicitly set its style to the block level:
span{
display: block;/*or inline-block*/
font-size: 16px;
line-height: .5;/*equal to 8px*/
}
There's even more thing to know about line-height. Look it at w3c
On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut."
When an element contains text that is rendered in more than one font, user agents may determine the 'normal' 'line-height' value according to the largest font size.
To conclude:
In inline level elements the height cannot be set like that the line-height cannot go below its height.
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
