CODEWITHSUNDEEP
htmlcss
user31782
user31782

Reputation: 7587

Why can't we set line-height less than 1 for span element?

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>

Upvotes: 9

Views: 10792

Answers (6)

Nickensoul
Nickensoul

Reputation: 443

Inline-level elements are strongly related to their parents. But you can try to set line-height directly to this inline-element's block-level parent.

.text-wrapper {
  line-height: 0.2;
}
.text {
  line-height: 0.2;
}

Codepen. Looks like this trick works.

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85653

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.

Upvotes: 16

David Wilkinson
David Wilkinson

Reputation: 5118

<span>'s are inline elements, so line-height won't apply in the way you want it to. Try making the span in question a block level element and see what happens, here's an example:

.test {
  display: block;
  line-height: 0.1;
}
<span class="test">
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>

Upvotes: 1

Michael Brenndoerfer
Michael Brenndoerfer

Reputation: 4096

If you want to use a span you need to set display: block

<span style="line-height: 50%; display: block;">
  This is Sparta!<br>
  This is Sparta!<br>
  This is Sparta!<br>
</span>

Upvotes: 5

Head In Cloud
Head In Cloud

Reputation: 2051

Try this

 p{line-height:1px;}

You can use pixels (px) in line height

Upvotes: 1

Sphinx
Sphinx

Reputation: 956

Why are you adding the paragraphs to a <span> element? I would do it as follows. That way you will be able to control all the paragraph tags

p{line-height:1px;}
<p>

This is a paragraph with a standard line-height.</p>
<p>This is a paragraph with a standard line-height.<br>
<p>This is a paragraph with a standard line-height.<p>
<p>This is a paragraph with a standard line-height.<p>
<p>This is a paragraph with a standard line-height.<p>
<p>This is a paragraph with a standard line-height.<p>

Upvotes: 1

Related Questions