Line height behaving differently inside container

Question

I've run into an interesting problem with line-height.

.text {
  font-family: sans-serif;
  font-size: 11px;
  line-height: 12px;
}

.container {
  display: flex;
}

<div class="container">
  <div class="text-container"><span class="text">Hello</span></div>
  <span class="text">Hello</span>
</div>

In this fiddle above there are 2 spans, both with font-size and line-height set, inside a flex container. One of the spans is inside a div and the other one isn't.

The spans themselves have a height of 12px, but the div has a height of 18px, causing the two spans to be out of line. If I add line-height: 0; to the div, then the problem is fixed and the div is 12px tall.

The spans must be on the same line, and one of them must be inside a container. display: block works, but for my purposes this element needs to be inline for certain use cases.

What's causing the div to have this extra height, and is there a nicer solution than having to set line-height: 0; on the div?

score 1 · Accepted Answer · answered Aug 24 '20 at 16:24

1

I found the answer here. It's to do with how line-height is calculated for inline elements. I've fixed it by setting font-size: 0; on the div containing the span.

answered Aug 24 '20 at 16:24

camargue92

312
1
2
10

score 0 · Answer 2 · answered Aug 24 '20 at 15:51

0

The display on the span elements are different. The one inside the div has a display: inline, while the span standalone is display block. If you would like them to react the same, simply put a display on the element.

answered Aug 24 '20 at 15:51

Leviathan

104
1
8

The one inside the div can't be a block element for my purposes. – camargue92 Aug 24 '20 at 15:56

luek baja · Answer 3 · 2020-08-24T16:06:19.927

If you set line-height: 12px; on the container it kind of works. But if you look closely there is still a small space.

.text {
  font-family: sans-serif;
  font-size: 11px;
  line-height: 12px;
}

.container {
  display: flex;
  
  line-height: 12px;
}

<!DOCTYPE html>
<body>
  <div class="container">
    <div class="text-container">
      <span class="text">Hello</span>
    </div>
    
    <span class="text">Hello</span>
  </div>
</body>

Line height behaving differently inside container

3 Answers3