Почему `line-height:1` вызывает переполнение в этой сетке CSS? ⇐ CSS

[Anonymous]

Я немного новичок в CSS-сетках, так что простите меня, если это очевидно, но я пока не нашел этому хорошего объяснения.
На мой взгляд, line-height:1 в основном означает «использовать нормальное значение». Фактически, этот код был скрыт глубоко в стиле сброса CSS, который я использовал, поэтому было неясно, почему возникла эта проблема, пока я не убрал его.
Надеюсь, приведенный ниже пример понятен — я создаю сетку 3x3 и хочу, чтобы содержимое было выровнено по дальним углам каждой ячейки.
Когда действует line-height:1, сверху и снизу происходит переполнение. Когда он удален, он выглядит так, как я ожидал (без переполнения).
(найдите текст «ЭТО ПРОБЛЕМА» в CSS ниже)
Что здесь происходит?

Код: Выделить всё

.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;
}

Код: Выделить всё

NW
N
NE
W
C
E
SW
S
SE

Если это зависит от браузера, я использую Firefox, и у меня это выглядит так:



Подробнее здесь: https://stackoverflow.com/questions/798 ... s-css-grid