Why isn't the CSS line-height the same when long text wraps?

Question

With the following HTML and CSS, why is there space the 1st paragraph, but not the 2nd or 3rd? The line-height is the same for all of them. How do I fix it so there is the same space about all 3 of the paragraphs?

I'm seeing this on Chrome, not sure if others see it or not.

.wrapper {
  width: 175px;
  border: 1px solid black;
  font-size: 20pt;
}

.wrapper p {
  margin: 0.5em 0 0 0;
  background-color: orange;
  line-height: 1.2;
  word-wrap: break-word;
}

.wrapper p span {
  display: inline-block;
}

<div class="wrapper">
  <p style="text-align:center"><span style="font-size:0.5em"><span style="color:#00bcd4;">AAAAA &amp; AAAAA</span></span></p>
  <p style="text-align:center"><span style="font-size:0.5em">BBBBB · BBBBB · BBBBB BBBBB BBBBB</span></p>
  <p style="text-align:center"><span style="font-size:0.5em"><span style="color:#00bcd4;">CCCCCCCC &amp; CCCCCCCCCC</span></span></p>
  <p>This is a paragraph without any spans, it needs to look correct too.</p>
</div>

Image of the issue in case this is browser-specific:

enter image description here

edit: Added another p without any spans. This needs to look correct as well.

score 1 · Answer 1 · answered Dec 19 '19 at 03:50

To fix your problem, you can remove your font-size:0.5em from the span's style attribute in your html, and into the styling of .wrapper p in your css.

<div class="wrapper">
  <p style="text-align:center"><span style="color:#00bcd4;">AAAAA &amp; AAAAA</span></p>
  <p style="text-align:center"><span>BBBBB · BBBBB · BBBBB BBBBB BBBBB</span></p>
  <p style="text-align:center"><span style="color:#00bcd4;">CCCCCCCC &amp; CCCCCCCCCC</span></p>
</div>
<!-- Also removed the extra spans in the first and third p's, as they would now serve no purpose. -->

.wrapper p {
  margin: 0.5em 0 0 0;
  background-color: orange;
  line-height: 1.2;
  word-wrap: break-word;
  font-size:0.5em; /* This is added */
}

This addresses the relationship between your font-size in your span and the parent element's font-size.

The em is relative to the parent element's font-size. The parent of the span is the p element, which inherits the font-size of the .wrapper, which is 20pt. Therefore, your span's minimum-height is set to 10pt, while your p's minimum height is 20pt.

So the gap exists because your span is half the size (0.5em) of your p, and when the text wraps in your span, it fills in the remaining space in the p, which is why the other two had no gaps.

Temani Afif · Answer 2 · 2019-12-19T10:21:21.107

^{Scroll to the end to get the fix if you want to avoid the boring and long explanation}

You need to consider 3 things. First, line-height applied to block element define the minimum height of the line box.

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 ^ref

In your case the minimum height is equal to 22pt = 1.2*20pt. Even if the p element is empty you will at least have this height:

.wrapper {
  width: 175px;
  border: 1px solid black;
  font-size: 20pt;
}

.wrapper p {
  margin: 0.5em 0 0 0;
  background-color: orange;
  line-height: 1.2;
  word-wrap: break-word;
}

.wrapper p span {
  display: inline-block;
}

<div class="wrapper">
  <p style="text-align:center"><span></span></p>
</div>

Second, you should note that an inline-block element is placed in one line box even if the text wrap inside it. We may have more than one line boxes inside it but it doesn't matter because your span elements will then take one line box from p

Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box. ^ref

The last thing you need to consider is vertical alignment which is by default baseline and define how our elements are placed inside the line box.

Now we have everything to understand what is happening:

In the first case, you have a span with one line of text and a font-size equal to 0.5em so the height will be around half the height of the line box of its container p. That element will be aligned at the baseline of the p element. Basically, we have an element having its height less than the line box so there is some free space to align it.

For the other cases, you have an element with 2 lines inside it, the same font-size but a height almost equal to the height of the line box where they are. If you look closely you will notice that the height of the p is even bigger because the baseline alignment will leave some space at the bottom.

So for the first case, we put a small element in a big space aligned at the baseline and for the other cases, an element in a space that fit it, also at the baseline.

Here is a better illustration to see what is happening. Notice how all the 3 elements are aligned the same at the bottom (the basline) and how the last 2 elements are slightly bigger.

.wrapper {
  border: 1px solid black;
  font-size: 20pt;
}

.wrapper p {
  width: 175px;
  margin:0;
  background-color: orange;
  line-height: 1.2;
  word-wrap: break-word;
  display:inline-block;
}

.wrapper p span {
  display: inline-block;
  outline:1px solid red;
}

<div class="wrapper">
  <p style="text-align:center"><span style="font-size:0.5em"><span style="color:#00bcd4;">AAAAA &amp; AAAAA</span></span></p>
  <p style="text-align:center"><span style="font-size:0.5em">BBBBB · BBBBB · BBBBB BBBBB BBBBB</span></p>
  <p style="text-align:center"><span style="font-size:0.5em"><span style="color:#00bcd4;">CCCCCCCC &amp; CCCCCCCCCC</span></span></p>
</div>

Here is another illustration to see the effect of vertical alignment:

.wrapper {
  border: 1px solid black;
  font-size: 20pt;
}

.wrapper p {
  width: 70px;
  margin:0;
  background-color: orange;
  line-height: 1.2;
  word-wrap: break-word;
  display:inline-block;
  vertical-align:bottom;
}

.wrapper p span {
  display: inline-block;
  outline:1px solid red;
}

<div class="wrapper">
  <p style="text-align:center"><span style="font-size:0.5em"><span style="color:#00bcd4;">AAAAA </span></span></p>
  <p style="text-align:center"><span style="font-size:0.5em;vertical-align:top"><span style="color:#00bcd4;">AAAAA </span></span></p>
  <p style="text-align:center"><span style="font-size:0.5em;vertical-align:bottom"><span style="color:#00bcd4;">AAAAA </span></span></p>
  <p style="text-align:center"><span style="font-size:0.5em;vertical-align:top">BBBBB  BBBBB BBBBB</span></p>
  <p style="text-align:center"><span style="font-size:0.5em;vertical-align:bottom">BBBBB  BBBBB BBBBB</span></p>
  <p style="text-align:center"><span style="font-size:0.5em">BBBBB  BBBBB BBBBB</span></p>
  <p style="text-align:center"><span style="font-size:0.5em"><span style="color:#00bcd4;">CCCCC CCCCC</span></span></p>
  <p style="text-align:center"><span style="font-size:0.5em;vertical-align:bottom"><span style="color:#00bcd4;">CCCCC CCCCC</span></span></p>
</div>

Notice how vertical-align different from baseline will have no effect on the element in the second case since the element is bigger that the minimum height defined so its height will define the height of the line box and there is no free space to align it unlike in the first case.

If you remove inline-block from the span element, you will remove the second part I have explained and each line inside the same will be placed in a different linebox inside the p.

.wrapper {
  border: 1px solid black;
  font-size: 20pt;
}

.wrapper p {
  width: 70px;
  margin:0;
  background-color: orange;
  line-height: 1.2;
  word-wrap: break-word;
  display:inline-block;
  vertical-align:bottom;
}

.wrapper p span {
  outline:1px solid red;
}

<div class="wrapper">
  <p style="text-align:center"><span style="font-size:0.5em"><span style="color:#00bcd4;">AAAAA </span></span></p>
  <p style="text-align:center"><span style="font-size:0.5em;vertical-align:top"><span style="color:#00bcd4;">AAAAA </span></span></p>
  <p style="text-align:center"><span style="font-size:0.5em;vertical-align:bottom"><span style="color:#00bcd4;">AAAAA </span></span></p>
  <p style="text-align:center"><span style="font-size:0.5em;vertical-align:top">BBBBB  BBBBB BBBBB</span></p>
  <p style="text-align:center"><span style="font-size:0.5em;vertical-align:bottom">BBBBB  BBBBB BBBBB</span></p>
  <p style="text-align:center"><span style="font-size:0.5em">BBBBB  BBBBB BBBBB</span></p>
  <p style="text-align:center"><span style="font-size:0.5em"><span style="color:#00bcd4;">CCCCC CCCCC</span></span></p>
  <p style="text-align:center"><span style="font-size:0.5em;vertical-align:bottom"><span style="color:#00bcd4;">CCCCC CCCCC</span></span></p>
</div>

If we consider the second case, we had an inline-block element with 3 line boxes inside it placed inside one line box of the p element. Now, we have an inline element placed inside 3 line boxes of the p elements.

To avoid this, simply make sure that the line-height is equal to only one line of text. Eiher use a small line-height (even 0 will do the job) and make sure to redefine it for span because line-height is inherited.

.wrapper {
  width: 175px;
  border: 1px solid black;
  font-size: 20pt;
}

.wrapper p {
  margin:0.5em 0 0;
  background-color: orange;
  line-height: 0;
  word-wrap: break-word;
}

.wrapper p span {
  display: inline-block;
  line-height: 1.2;
}

<div class="wrapper">
  <p style="text-align:center"><span style="font-size:0.5em"><span style="color:#00bcd4;">AAAAA &amp; AAAAA</span></span></p>
  <p style="text-align:center"><span style="font-size:0.5em">BBBBB · BBBBB · BBBBB BBBBB BBBBB</span></p>
  <p style="text-align:center"><span style="font-size:0.5em"><span style="color:#00bcd4;">CCCCCCCC &amp; CCCCCCCCCC</span></span></p>
</div>

Or define the font-size you are using for span inside p

.wrapper {
  width: 175px;
  border: 1px solid black;
  font-size: 20pt;
}

.wrapper p {
  margin:0.5em 0 0;
  background-color: orange;
  line-height: 1.2;
  font-size:0.5em;
  word-wrap: break-word;
}

.wrapper p span {
  display: inline-block;
}

<div class="wrapper">
  <p style="text-align:center"><span ><span style="color:#00bcd4;">AAAAA &amp; AAAAA</span></span></p>
  <p style="text-align:center"><span >BBBBB · BBBBB · BBBBB BBBBB BBBBB</span></p>
  <p style="text-align:center"><span><span style="color:#00bcd4;">CCCCCCCC &amp; CCCCCCCCCC</span></span></p>
</div>

Related questions for more detail and examples: Line height issue with inline-block elements

score 0 · Answer 3 · answered Dec 19 '19 at 01:41

0

Because you have added display: inline-block in <span>. span and paragraphs are supposed to bedisplay: inline`.

Remove

.wrapper p span {
  display: inline-block;
}

and add

.wrapper p span {
  display: inline;
}

This will solve the issue.

answered Dec 19 '19 at 01:41

Balram Singh

1,576
19
30

Ahh, but that adds a lot of space between lines when wrapped. So it doesn’t really fix the issue. – Justin808 Dec 19 '19 at 02:46
paragraphs are **block-level** elements not `inline`. – Paulie_D Dec 19 '19 at 09:49
@Paulie_D I am talking about span used inside p – Balram Singh Jan 07 '20 at 05:00

Why isn't the CSS line-height the same when long text wraps?

3 Answers3