Why does `line-height:1` cause overflow in this CSS grid?

Question

I'm a little new to CSS grid stuff, so forgive me if this is obvious, but I haven't found a good explanation for this so far.

In my mind, line-height:1 basically means "use the normal value." In fact, that code was buried deep in a CSS reset style I was using, so it was unclear why this problem was happening until I stripped it down.

Hopefully the example below is clear — I'm making a 3x3 grid, and I want the contents aligned to the far corners of each cell.

When line-height:1 is in effect, there is overflow on the top and bottom. When it is removed, it looks how I expect (no overflow).

(look for the text "THIS IS THE PROBLEM" in the CSS, below)

What's going on, here?

.outermost {
  background-color:purple;
  padding:10px;
}
 
.container { /* shard */
  width:300px;
  height:300px;
  position:relative;
}

.container>div {
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
}

.container {
  background-color:lightblue;
}

.myGrid {
  display:grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
  grid-template-rows: 33.3% 33.3% 33.3%;
  
  /* THIS IS THE PROBLEM */
  /*
    Why does setting line-height:1 cause
    overflow on the top/bottom of the grid?
    See: NW,N,NE, SW,S,SE
  */
  line-height:1;
}
.myGrid span {
  background-color:yellow;
}

.myGrid .gridNW {
  align-self:start;
  text-align:left;
}
.myGrid .gridN {
  align-self:start;
  text-align:center;
}
.myGrid .gridNE {
  align-self:start;
  text-align:right;
}
.myGrid .gridW {
  align-self:center;
  text-align:left;
}
.myGrid .gridC {
  align-self:center;
  text-align:center;
}
.myGrid .gridE {
  align-self:center;
  text-align:right;
}
.myGrid .gridSW {
  align-self:end;
  text-align:left;
}
.myGrid .gridS {
  align-self:end;
  text-align:center;
}
.myGrid .gridSE {
  align-self:end;
  text-align:right;
}

<div class="outermost">
  <div class="container">
    <div class="myGrid">
      <div class="gridNW"><span>NW</span></div>
      <div class="gridN"><span>N</span></div>
      <div class="gridNE"><span>NE</span></div>
      <div class="gridW"><span>W</span></div>
      <div class="gridC"><span>C</span></div>
      <div class="gridE"><span>E</span></div>
      <div class="gridSW"><span>SW</span></div>
      <div class="gridS"><span>S</span></div>
      <div class="gridSE"><span>SE</span></div>
    </div>
  </div>
</div>

In case this is browser-dependent, I'm on Firefox and this is what it looks like for me:

Did you try adding an image (of your Firefox browser) at the bottom of this question? If so, I don't see it :) — ninadepina
– ninadepina, Commented Nov 3 at 18:01
line-height set the height in between 2 lines wich requieres at least 1.2(em) to cover all the space used by letters being print also below the baseline. such as p or q . so line-height:1 is too short of average .2 :) — G-Cyrillus
– G-Cyrillus, Commented Nov 3 at 18:03
The normal line-height is complicated (it depends on the font metrics), but it's almost always greater than 1. — Alohci
– Alohci, Commented Nov 3 at 18:07

Temani Afif · Accepted Answer · 2025-11-03 20:01:28Z

In my mind, line-height:1 basically means "use the normal value."

No it doesn't and the yellow part you see is not controlled by line-height as you might think.

A simple fix is to switch to inline-block

.outermost {
  background-color:purple;
  padding:10px;
}
 
.container { /* shard */
  width:300px;
  height:300px;
  position:relative;
}

.container>div {
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
}

.container {
  background-color:lightblue;
}

.myGrid {
  display:grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
  grid-template-rows: 33.3% 33.3% 33.3%;
  
  /* THIS IS THE PROBLEM */
  /*
    Why does setting line-height:1 cause
    overflow on the top/bottom of the grid?
    See: NW,N,NE, SW,S,SE
  */
  line-height:1;
}
.myGrid span {
  background-color:yellow;
  display: inline-block;
}

.myGrid .gridNW {
  align-self:start;
  text-align:left;
}
.myGrid .gridN {
  align-self:start;
  text-align:center;
}
.myGrid .gridNE {
  align-self:start;
  text-align:right;
}
.myGrid .gridW {
  align-self:center;
  text-align:left;
}
.myGrid .gridC {
  align-self:center;
  text-align:center;
}
.myGrid .gridE {
  align-self:center;
  text-align:right;
}
.myGrid .gridSW {
  align-self:end;
  text-align:left;
}
.myGrid .gridS {
  align-self:end;
  text-align:center;
}
.myGrid .gridSE {
  align-self:end;
  text-align:right;
}

<div class="outermost">
  <div class="container">
    <div class="myGrid">
      <div class="gridNW"><span>NW</span></div>
      <div class="gridN"><span>N</span></div>
      <div class="gridNE"><span>NE</span></div>
      <div class="gridW"><span>W</span></div>
      <div class="gridC"><span>C</span></div>
      <div class="gridE"><span>E</span></div>
      <div class="gridSW"><span>SW</span></div>
      <div class="gridS"><span>S</span></div>
      <div class="gridSE"><span>SE</span></div>
    </div>
  </div>
</div>

And if you want a complete explanation on what is happening, check this: Can specific text character change the line height?

Thanks, that is helpful! To save others some clicks, the reason inline-block changes the behavior is spelled out here, which references the CSS spec: stackoverflow.com/questions/54341767/…

Collectives™ on Stack Overflow

Why does `line-height:1` cause overflow in this CSS grid?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related