Почему глифы тибетского шрифта Noto Serif выходят за пределы ограничивающей рамки содержащего их элемента div? ⇐ CSS

[Anonymous]

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

.pb-64 {
padding-bottom: 64px;
}

.p-16 {
padding: 16px;
}
.gap-16 {
gap: 16px;
}
.flex-col {
flex-direction: column;
}
.w-full {
width: 100%;
}
.flex {
display: flex;
}
.relative {
position: relative;
}
* {
border: none;
}
.flex-col {
flex-direction: column;
}

.flex-shrink {
flex-shrink: 1;
}
.flex {
display: flex;
}
.mb-64 {
margin-bottom: 64px;
}
.relative {
position: relative;
}
.items-stretch {
align-items: stretch;
}

.flex {
display: flex;
}
.relative {
position: relative;
}
.block {
display: block;
}
.relative {
position: relative;
}
.transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}

.gap-8 {
gap: 8px;
}
.flex-col {
flex-direction: column;
}
.flex {
display: flex;
}
.relative {
position: relative;
}
a {
color: inherit;
text-decoration: inherit;
}
.items-center {
align-items: center;
}

.flex-col {
flex-direction: column;
}
.flex {
display: flex;
}
.leading-\[1\.4\] {
line-height: 1.4;
}

.font-normal {
font-weight: 400;
}
.text-6xl {
font-size: 3.75rem;
line-height: 1;
}
.block {
display: block;
}
.relative {
position: relative;
}
.font-NotoSerifTibetan {
font-family: "Noto Serif Tibetan", serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.opacity-0 {
opacity: 0;
}
.p-8 {
padding: 8px;
}
.w-32 {
width: 32px;
}
.h-32 {
height: 32px;
}

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

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Tibetan:[email protected]&display=swap');
ཀka[i][/i]ཁkɦa[i][/i]གga[i][/i]ངṅa[i][/i]ཅtxa[i][/i]ཆtxɦa[i][/i]ཇdja[i][/i]ཉnẏa[i][/i]ཏta[i][/i]ཐtɦa[i][/i]དda[i][/i]ནna[i][/i]པpa[i][/i]ཕpɦa[i][/i]བba[i][/i]མma[i][/i]ཙtsa[i][/i]ཚtsɦa[i][/i]ཛdza[i][/i]ཝwa[i][/i]ཞja[i][/i]ཟza[i][/i]འhɦ[i][/i]ཡya[i][/i]

[img]https: //i.sstatic.net/51kyF3oH.png[/img]

Щелкните правой кнопкой мыши по HTML-коду, чтобы проверить его после запуска приведенного выше примера.
Почему серая зона (за синим квадратом) выходит за пределы синего квадрата? Серая область — это область, на которую можно навести курсор, в области .block, которая аналогична области ::selection E-образного глифа. Но синий квадрат — это ограничивающая рамка элемента div. Почему он не покрывает весь глиф?
Я много играл с высотой строки, но разве она не должна работать нормально, не затрагивая высоту строки? И я все еще не мог заставить его работать с изменением высоты строки для каждого элемента в дереве DOM. Я пытался сузить его до отдельного примера, но каждый раз, когда я начинал воспроизведение с нуля, я не мог воспроизвести, поэтому с моей конфигурацией классов CSS происходит что-то странное.

Подробнее здесь: https://stackoverflow.com/questions/789 ... -box-of-th