Lance Pollard
Reputation: 79468
Why are Noto Serif Tibetan font glyphs stretching outside the bounding box of their containing div?
.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;
}<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Tibetan:[email protected]&display=swap');
</style><div class="relative w-full pb-64 p-16 flex flex-col gap-16"><div class="relative flex flex-shrink flex-col mb-64" style="justify-content: center; row-gap: 0px; z-index: 2;"><div class="relative flex items-stretch" style="justify-content: center; row-gap: 8px; z-index: 2;"><div class="relative block" style="width: 132px; margin-right: 4px; z-index: 2;"><a class="relative [&_i]:hover:opacity-100 hover:text-violet-600 transition-colors flex flex-col gap-8 itemss-center" href="" rowinddex="0" columninddex="0"><div class="relative flex flex-col items-center"><span class="relative block font-normal text-6xl leading-[1.4] font-NotoSerifTibetan">ཀ</span><div class="relative text-gray-500">ka</div></div><i class="opacity-0 transition-opacity hover:text-violet-600 inline-block w-32 h-32 p-8"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.54,16.54a1,1,0,0,1-.71-.3,1,1,0,0,1,0-1.41,4,4,0,0,0,0-5.66,1,1,0,0,1,1.41-1.41,6,6,0,0,1,0,8.48A1,1,0,0,1,15.54,16.54Z" class="fill-gray-800 dark:fill-gray-400"></path><path d="M11.38,4.08a1,1,0,0,0-1.09.21L6.59,8H4a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2H6.59l3.7,3.71A1,1,0,0,0,11,20a.84.84,0,0,0,.38-.08A1,1,0,0,0,12,19V5A1,1,0,0,0,11.38,4.08Z" class="fill-gray-800 dark:fill-gray-400"></path></svg></i></a></div><div class="block" style="width: 132px; margin-left: 4px; margin-right: 4px; z-index: 2;"><a class="[&_i]:hover:opacity-100 hover:text-violet-600 transition-colors flex flex-col gap-8 items-center" rowindex="0" columnindex="1" href=""><div class="flex flex-col items-center"><span class="block font-semibold text-6xl leading-[1.4] font-NotoSerifTibetan">ཁ</span><div class="text-gray-500">kɦa</div></div><i class="opacity-0 transition-opacity hover:text-violet-600 inline-block w-32 h-32 p-8"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.54,16.54a1,1,0,0,1-.71-.3,1,1,0,0,1,0-1.41,4,4,0,0,0,0-5.66,1,1,0,0,1,1.41-1.41,6,6,0,0,1,0,8.48A1,1,0,0,1,15.54,16.54Z" class="fill-gray-800 dark:fill-gray-400"></path><path d="M11.38,4.08a1,1,0,0,0-1.09.21L6.59,8H4a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2H6.59l3.7,3.71A1,1,0,0,0,11,20a.84.84,0,0,0,.38-.08A1,1,0,0,0,12,19V5A1,1,0,0,0,11.38,4.08Z" class="fill-gray-800 dark:fill-gray-400"></path></svg></i></a></div><div class="block" style="width: 132px; margin-left: 4px; margin-right: 4px; z-index: 2;"><a class="[&_i]:hover:opacity-100 hover:text-violet-600 transition-colors flex flex-col gap-8 items-center" rowindex="0" columnindex="2" href=""><div class="flex flex-col items-center"><span class="block font-semibold text-6xl leading-[1.4] font-NotoSerifTibetan">ག</span><div class="text-gray-500">ga</div></div><i class="opacity-0 transition-opacity hover:text-violet-600 inline-block w-32 h-32 p-8"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.54,16.54a1,1,0,0,1-.71-.3,1,1,0,0,1,0-1.41,4,4,0,0,0,0-5.66,1,1,0,0,1,1.41-1.41,6,6,0,0,1,0,8.48A1,1,0,0,1,15.54,16.54Z" class="fill-gray-800 dark:fill-gray-400"></path><path d="M11.38,4.08a1,1,0,0,0-1.09.21L6.59,8H4a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2H6.59l3.7,3.71A1,1,0,0,0,11,20a.84.84,0,0,0,.38-.08A1,1,0,0,0,12,19V5A1,1,0,0,0,11.38,4.08Z" class="fill-gray-800 dark:fill-gray-400"></path></svg></i></a></div><div class="block" style="width: 132px; margin-left: 4px; margin-right: 4px; z-index: 2;"><a class="[&_i]:hover:opacity-100 hover:text-violet-600 transition-colors flex flex-col gap-8 items-center" rowindex="0" columnindex="3" href=""><div class="flex flex-col items-center"><span class="block font-semibold text-6xl leading-[1.4] font-NotoSerifTibetan">ང</span><div class="text-gray-500">ṅa</div></div><i class="opacity-0 transition-opacity hover:text-violet-600 inline-block w-32 h-32 p-8"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.54,16.54a1,1,0,0,1-.71-.3,1,1,0,0,1,0-1.41,4,4,0,0,0,0-5.66,1,1,0,0,1,1.41-1.41,6,6,0,0,1,0,8.48A1,1,0,0,1,15.54,16.54Z" class="fill-gray-800 dark:fill-gray-400"></path><path d="M11.38,4.08a1,1,0,0,0-1.09.21L6.59,8H4a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2H6.59l3.7,3.71A1,1,0,0,0,11,20a.84.84,0,0,0,.38-.08A1,1,0,0,0,12,19V5A1,1,0,0,0,11.38,4.08Z" class="fill-gray-800 dark:fill-gray-400"></path></svg></i></a></div><div class="block" style="width: 132px; margin-left: 4px; margin-right: 4px; z-index: 2;"><a class="[&_i]:hover:opacity-100 hover:text-violet-600 transition-colors flex flex-col gap-8 items-center" rowindex="0" columnindex="4" href=""><div class="flex flex-col items-center"><span class="block font-semibold text-6xl leading-[1.4] font-NotoSerifTibetan">ཅ</span><div class="text-gray-500">txa</div></div><i class="opacity-0 transition-opacity hover:text-violet-600 inline-block w-32 h-32 p-8"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.54,16.54a1,1,0,0,1-.71-.3,1,1,0,0,1,0-1.41,4,4,0,0,0,0-5.66,1,1,0,0,1,1.41-1.41,6,6,0,0,1,0,8.48A1,1,0,0,1,15.54,16.54Z" class="fill-gray-800 dark:fill-gray-400"></path><path d="M11.38,4.08a1,1,0,0,0-1.09.21L6.59,8H4a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2H6.59l3.7,3.71A1,1,0,0,0,11,20a.84.84,0,0,0,.38-.08A1,1,0,0,0,12,19V5A1,1,0,0,0,11.38,4.08Z" class="fill-gray-800 dark:fill-gray-400"></path></svg></i></a></div><div class="block" style="width: 132px; margin-left: 4px; z-index: 2;"><a class="[&_i]:hover:opacity-100 hover:text-violet-600 transition-colors flex flex-col gap-8 items-center" rowindex="0" columnindex="5" href=""><div class="flex flex-col items-center"><span class="block font-semibold text-6xl leading-[1.4] font-NotoSerifTibetan">ཆ</span><div class="text-gray-500">txɦa</div></div><i class="opacity-0 transition-opacity hover:text-violet-600 inline-block w-32 h-32 p-8"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.54,16.54a1,1,0,0,1-.71-.3,1,1,0,0,1,0-1.41,4,4,0,0,0,0-5.66,1,1,0,0,1,1.41-1.41,6,6,0,0,1,0,8.48A1,1,0,0,1,15.54,16.54Z" class="fill-gray-800 dark:fill-gray-400"></path><path d="M11.38,4.08a1,1,0,0,0-1.09.21L6.59,8H4a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2H6.59l3.7,3.71A1,1,0,0,0,11,20a.84.84,0,0,0,.38-.08A1,1,0,0,0,12,19V5A1,1,0,0,0,11.38,4.08Z" class="fill-gray-800 dark:fill-gray-400"></path></svg></i></a></div></div><div class="relative flex items-stretch" style="justify-content: center; row-gap: 8px; z-index: 2;"><div class="block" style="width: 132px; margin-right: 4px; z-index: 2;"><a class="[&_i]:hover:opacity-100 hover:text-violet-600 transition-colors flex flex-col gap-8 items-center" rowindex="1" columnindex="0" href=""><div class="flex flex-col items-center"><span class="block font-semibold text-6xl leading-[1.4] font-NotoSerifTibetan">ཇ</span><div class="text-gray-500">dja</div></div><i class="opacity-0 transition-opacity hover:text-violet-600 inline-block w-32 h-32 p-8"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.54,16.54a1,1,0,0,1-.71-.3,1,1,0,0,1,0-1.41,4,4,0,0,0,0-5.66,1,1,0,0,1,1.41-1.41,6,6,0,0,1,0,8.48A1,1,0,0,1,15.54,16.54Z" class="fill-gray-800 dark:fill-gray-400"></path><path d="M11.38,4.08a1,1,0,0,0-1.09.21L6.59,8H4a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2H6.59l3.7,3.71A1,1,0,0,0,11,20a.84.84,0,0,0,.38-.08A1,1,0,0,0,12,19V5A1,1,0,0,0,11.38,4.08Z" class="fill-gray-800 dark:fill-gray-400"></path></svg></i></a></div><div class="block" style="width: 132px; margin-left: 4px; margin-right: 4px; z-index: 2;"><a class="[&_i]:hover:opacity-100 hover:text-violet-600 transition-colors flex flex-col gap-8 items-center" rowindex="1" columnindex="1" href=""><div class="flex flex-col items-center"><span class="block font-semibold text-6xl leading-[1.4] font-NotoSerifTibetan">ཉ</span><div class="text-gray-500">nẏa</div></div><i class="opacity-0 transition-opacity hover:text-violet-600 inline-block w-32 h-32 p-8"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.54,16.54a1,1,0,0,1-.71-.3,1,1,0,0,1,0-1.41,4,4,0,0,0,0-5.66,1,1,0,0,1,1.41-1.41,6,6,0,0,1,0,8.48A1,1,0,0,1,15.54,16.54Z" class="fill-gray-800 dark:fill-gray-400"></path><path d="M11.38,4.08a1,1,0,0,0-1.09.21L6.59,8H4a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2H6.59l3.7,3.71A1,1,0,0,0,11,20a.84.84,0,0,0,.38-.08A1,1,0,0,0,12,19V5A1,1,0,0,0,11.38,4.08Z" class="fill-gray-800 dark:fill-gray-400"></path></svg></i></a></div><div class="block" style="width: 132px; margin-left: 4px; margin-right: 4px; z-index: 2;"><a class="[&_i]:hover:opacity-100 hover:text-violet-600 transition-colors flex flex-col gap-8 items-center" rowindex="1" columnindex="2" href=""><div class="flex flex-col items-center"><span class="block font-semibold text-6xl leading-[1.4] font-NotoSerifTibetan">ཏ</span><div class="text-gray-500">ta</div></div><i class="opacity-0 transition-opacity hover:text-violet-600 inline-block w-32 h-32 p-8"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.54,16.54a1,1,0,0,1-.71-.3,1,1,0,0,1,0-1.41,4,4,0,0,0,0-5.66,1,1,0,0,1,1.41-1.41,6,6,0,0,1,0,8.48A1,1,0,0,1,15.54,16.54Z" class="fill-gray-800 dark:fill-gray-400"></path><path d="M11.38,4.08a1,1,0,0,0-1.09.21L6.59,8H4a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2H6.59l3.7,3.71A1,1,0,0,0,11,20a.84.84,0,0,0,.38-.08A1,1,0,0,0,12,19V5A1,1,0,0,0,11.38,4.08Z" class="fill-gray-800 dark:fill-gray-400"></path></svg></i></a></div><div class="block" style="width: 132px; margin-left: 4px; margin-right: 4px; z-index: 2;"><a class="[&_i]:hover:opacity-100 hover:text-violet-600 transition-colors flex flex-col gap-8 items-center" rowindex="1" columnindex="3" href=""><div class="flex flex-col items-center"><span class="block font-semibold text-6xl leading-[1.4] font-NotoSerifTibetan">ཐ</span><div class="text-gray-500">tɦa</div></div><i class="opacity-0 transition-opacity hover:text-violet-600 inline-block w-32 h-32 p-8"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.54,16.54a1,1,0,0,1-.71-.3,1,1,0,0,1,0-1.41,4,4,0,0,0,0-5.66,1,1,0,0,1,1.41-1.41,6,6,0,0,1,0,8.48A1,1,0,0,1,15.54,16.54Z" class="fill-gray-800 dark:fill-gray-400"></path><path d="M11.38,4.08a1,1,0,0,0-1.09.21L6.59,8H4a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2H6.59l3.7,3.71A1,1,0,0,0,11,20a.84.84,0,0,0,.38-.08A1,1,0,0,0,12,19V5A1,1,0,0,0,11.38,4.08Z" class="fill-gray-800 dark:fill-gray-400"></path></svg></i></a></div><div class="block" style="width: 132px; margin-left: 4px; margin-right: 4px; z-index: 2;"><a class="[&_i]:hover:opacity-100 hover:text-violet-600 transition-colors flex flex-col gap-8 items-center" rowindex="1" columnindex="4" href=""><div class="flex flex-col items-center"><span class="block font-semibold text-6xl leading-[1.4] font-NotoSerifTibetan">ད</span><div class="text-gray-500">da</div></div><i class="opacity-0 transition-opacity hover:text-violet-600 inline-block w-32 h-32 p-8"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.54,16.54a1,1,0,0,1-.71-.3,1,1,0,0,1,0-1.41,4,4,0,0,0,0-5.66,1,1,0,0,1,1.41-1.41,6,6,0,0,1,0,8.48A1,1,0,0,1,15.54,16.54Z" class="fill-gray-800 dark:fill-gray-400"></path><path d="M11.38,4.08a1,1,0,0,0-1.09.21L6.59,8H4a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2H6.59l3.7,3.71A1,1,0,0,0,11,20a.84.84,0,0,0,.38-.08A1,1,0,0,0,12,19V5A1,1,0,0,0,11.38,4.08Z" class="fill-gray-800 dark:fill-gray-400"></path></svg></i></a></div><div class="block" style="width: 132px; margin-left: 4px; z-index: 2;"><a class="[&_i]:hover:opacity-100 hover:text-violet-600 transition-colors flex flex-col gap-8 items-center" rowindex="1" columnindex="5" href=""><div class="flex flex-col items-center"><span class="block font-semibold text-6xl leading-[1.4] font-NotoSerifTibetan">ན</span><div class="text-gray-500">na</div></div><i class="opacity-0 transition-opacity hover:text-violet-600 inline-block w-32 h-32 p-8"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.54,16.54a1,1,0,0,1-.71-.3,1,1,0,0,1,0-1.41,4,4,0,0,0,0-5.66,1,1,0,0,1,1.41-1.41,6,6,0,0,1,0,8.48A1,1,0,0,1,15.54,16.54Z" class="fill-gray-800 dark:fill-gray-400"></path><path d="M11.38,4.08a1,1,0,0,0-1.09.21L6.59,8H4a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2H6.59l3.7,3.71A1,1,0,0,0,11,20a.84.84,0,0,0,.38-.08A1,1,0,0,0,12,19V5A1,1,0,0,0,11.38,4.08Z" class="fill-gray-800 dark:fill-gray-400"></path></svg></i></a></div></div><div class="relative flex items-stretch" style="justify-content: center; row-gap: 8px; z-index: 2;"><div class="block" style="width: 132px; margin-right: 4px; z-index: 2;"><a class="[&_i]:hover:opacity-100 hover:text-violet-600 transition-colors flex flex-col gap-8 items-center" rowindex="2" columnindex="0" href=""><div class="flex flex-col items-center"><span class="block font-semibold text-6xl leading-[1.4] font-NotoSerifTibetan">པ</span><div class="text-gray-500">pa</div></div><i class="opacity-0 transition-opacity hover:text-violet-600 inline-block w-32 h-32 p-8"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.54,16.54a1,1,0,0,1-.71-.3,1,1,0,0,1,0-1.41,4,4,0,0,0,0-5.66,1,1,0,0,1,1.41-1.41,6,6,0,0,1,0,8.48A1,1,0,0,1,15.54,16.54Z" class="fill-gray-800 dark:fill-gray-400"></path><path d="M11.38,4.08a1,1,0,0,0-1.09.21L6.59,8H4a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2H6.59l3.7,3.71A1,1,0,0,0,11,20a.84.84,0,0,0,.38-.08A1,1,0,0,0,12,19V5A1,1,0,0,0,11.38,4.08Z" class="fill-gray-800 dark:fill-gray-400"></path></svg></i></a></div><div class="block" style="width: 132px; margin-left: 4px; margin-right: 4px; z-index: 2;"><a class="[&_i]:hover:opacity-100 hover:text-violet-600 transition-colors flex flex-col gap-8 items-center" rowindex="2" columnindex="1" href=""><div class="flex flex-col items-center"><span class="block font-semibold text-6xl leading-[1.4] font-NotoSerifTibetan">ཕ</span><div class="text-gray-500">pɦa</div></div><i class="opacity-0 transition-opacity hover:text-violet-600 inline-block w-32 h-32 p-8"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.54,16.54a1,1,0,0,1-.71-.3,1,1,0,0,1,0-1.41,4,4,0,0,0,0-5.66,1,1,0,0,1,1.41-1.41,6,6,0,0,1,0,8.48A1,1,0,0,1,15.54,16.54Z" class="fill-gray-800 dark:fill-gray-400"></path><path d="M11.38,4.08a1,1,0,0,0-1.09.21L6.59,8H4a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2H6.59l3.7,3.71A1,1,0,0,0,11,20a.84.84,0,0,0,.38-.08A1,1,0,0,0,12,19V5A1,1,0,0,0,11.38,4.08Z" class="fill-gray-800 dark:fill-gray-400"></path></svg></i></a></div><div class="block" style="width: 132px; margin-left: 4px; margin-right: 4px; z-index: 2;"><a class="[&_i]:hover:opacity-100 hover:text-violet-600 transition-colors flex flex-col gap-8 items-center" rowindex="2" columnindex="2" href=""><div class="flex flex-col items-center"><span class="block font-semibold text-6xl leading-[1.4] font-NotoSerifTibetan">བ</span><div class="text-gray-500">ba</div></div><i class="opacity-0 transition-opacity hover:text-violet-600 inline-block w-32 h-32 p-8"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.54,16.54a1,1,0,0,1-.71-.3,1,1,0,0,1,0-1.41,4,4,0,0,0,0-5.66,1,1,0,0,1,1.41-1.41,6,6,0,0,1,0,8.48A1,1,0,0,1,15.54,16.54Z" class="fill-gray-800 dark:fill-gray-400"></path><path d="M11.38,4.08a1,1,0,0,0-1.09.21L6.59,8H4a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2H6.59l3.7,3.71A1,1,0,0,0,11,20a.84.84,0,0,0,.38-.08A1,1,0,0,0,12,19V5A1,1,0,0,0,11.38,4.08Z" class="fill-gray-800 dark:fill-gray-400"></path></svg></i></a></div><div class="block" style="width: 132px; margin-left: 4px; margin-right: 4px; z-index: 2;"><a class="[&_i]:hover:opacity-100 hover:text-violet-600 transition-colors flex flex-col gap-8 items-center" rowindex="2" columnindex="3" href=""><div class="flex flex-col items-center"><span class="block font-semibold text-6xl leading-[1.4] font-NotoSerifTibetan">མ</span><div class="text-gray-500">ma</div></div><i class="opacity-0 transition-opacity hover:text-violet-600 inline-block w-32 h-32 p-8"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.54,16.54a1,1,0,0,1-.71-.3,1,1,0,0,1,0-1.41,4,4,0,0,0,0-5.66,1,1,0,0,1,1.41-1.41,6,6,0,0,1,0,8.48A1,1,0,0,1,15.54,16.54Z" class="fill-gray-800 dark:fill-gray-400"></path><path d="M11.38,4.08a1,1,0,0,0-1.09.21L6.59,8H4a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2H6.59l3.7,3.71A1,1,0,0,0,11,20a.84.84,0,0,0,.38-.08A1,1,0,0,0,12,19V5A1,1,0,0,0,11.38,4.08Z" class="fill-gray-800 dark:fill-gray-400"></path></svg></i></a></div><div class="block" style="width: 132px; margin-left: 4px; margin-right: 4px; z-index: 2;"><a class="[&_i]:hover:opacity-100 hover:text-violet-600 transition-colors flex flex-col gap-8 items-center" rowindex="2" columnindex="4" href=""><div class="flex flex-col items-center"><span class="block font-semibold text-6xl leading-[1.4] font-NotoSerifTibetan">ཙ</span><div class="text-gray-500">tsa</div></div><i class="opacity-0 transition-opacity hover:text-violet-600 inline-block w-32 h-32 p-8"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.54,16.54a1,1,0,0,1-.71-.3,1,1,0,0,1,0-1.41,4,4,0,0,0,0-5.66,1,1,0,0,1,1.41-1.41,6,6,0,0,1,0,8.48A1,1,0,0,1,15.54,16.54Z" class="fill-gray-800 dark:fill-gray-400"></path><path d="M11.38,4.08a1,1,0,0,0-1.09.21L6.59,8H4a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2H6.59l3.7,3.71A1,1,0,0,0,11,20a.84.84,0,0,0,.38-.08A1,1,0,0,0,12,19V5A1,1,0,0,0,11.38,4.08Z" class="fill-gray-800 dark:fill-gray-400"></path></svg></i></a></div><div class="block" style="width: 132px; margin-left: 4px; z-index: 2;"><a class="[&_i]:hover:opacity-100 hover:text-violet-600 transition-colors flex flex-col gap-8 items-center" rowindex="2" columnindex="5" href=""><div class="flex flex-col items-center"><span class="block font-semibold text-6xl leading-[1.4] font-NotoSerifTibetan">ཚ</span><div class="text-gray-500">tsɦa</div></div><i class="opacity-0 transition-opacity hover:text-violet-600 inline-block w-32 h-32 p-8"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.54,16.54a1,1,0,0,1-.71-.3,1,1,0,0,1,0-1.41,4,4,0,0,0,0-5.66,1,1,0,0,1,1.41-1.41,6,6,0,0,1,0,8.48A1,1,0,0,1,15.54,16.54Z" class="fill-gray-800 dark:fill-gray-400"></path><path d="M11.38,4.08a1,1,0,0,0-1.09.21L6.59,8H4a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2H6.59l3.7,3.71A1,1,0,0,0,11,20a.84.84,0,0,0,.38-.08A1,1,0,0,0,12,19V5A1,1,0,0,0,11.38,4.08Z" class="fill-gray-800 dark:fill-gray-400"></path></svg></i></a></div></div><div class="relative flex items-stretch" style="justify-content: center; row-gap: 8px; z-index: 2;"><div class="block" style="width: 132px; margin-right: 4px; z-index: 2;"><a class="[&_i]:hover:opacity-100 hover:text-violet-600 transition-colors flex flex-col gap-8 items-center" rowindex="3" columnindex="0" href=""><div class="flex flex-col items-center"><span class="block font-semibold text-6xl leading-[1.4] font-NotoSerifTibetan">ཛ</span><div class="text-gray-500">dza</div></div><i class="opacity-0 transition-opacity hover:text-violet-600 inline-block w-32 h-32 p-8"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.54,16.54a1,1,0,0,1-.71-.3,1,1,0,0,1,0-1.41,4,4,0,0,0,0-5.66,1,1,0,0,1,1.41-1.41,6,6,0,0,1,0,8.48A1,1,0,0,1,15.54,16.54Z" class="fill-gray-800 dark:fill-gray-400"></path><path d="M11.38,4.08a1,1,0,0,0-1.09.21L6.59,8H4a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2H6.59l3.7,3.71A1,1,0,0,0,11,20a.84.84,0,0,0,.38-.08A1,1,0,0,0,12,19V5A1,1,0,0,0,11.38,4.08Z" class="fill-gray-800 dark:fill-gray-400"></path></svg></i></a></div><div class="block" style="width: 132px; margin-left: 4px; margin-right: 4px; z-index: 2;"><a class="[&_i]:hover:opacity-100 hover:text-violet-600 transition-colors flex flex-col gap-8 items-center" rowindex="3" columnindex="1" href=""><div class="flex flex-col items-center"><span class="block font-semibold text-6xl leading-[1.4] font-NotoSerifTibetan">ཝ</span><div class="text-gray-500">wa</div></div><i class="opacity-0 transition-opacity hover:text-violet-600 inline-block w-32 h-32 p-8"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.54,16.54a1,1,0,0,1-.71-.3,1,1,0,0,1,0-1.41,4,4,0,0,0,0-5.66,1,1,0,0,1,1.41-1.41,6,6,0,0,1,0,8.48A1,1,0,0,1,15.54,16.54Z" class="fill-gray-800 dark:fill-gray-400"></path><path d="M11.38,4.08a1,1,0,0,0-1.09.21L6.59,8H4a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2H6.59l3.7,3.71A1,1,0,0,0,11,20a.84.84,0,0,0,.38-.08A1,1,0,0,0,12,19V5A1,1,0,0,0,11.38,4.08Z" class="fill-gray-800 dark:fill-gray-400"></path></svg></i></a></div><div class="block" style="width: 132px; margin-left: 4px; margin-right: 4px; z-index: 2;"><a class="[&_i]:hover:opacity-100 hover:text-violet-600 transition-colors flex flex-col gap-8 items-center" rowindex="3" columnindex="2" href=""><div class="flex flex-col items-center"><span class="block font-semibold text-6xl leading-[1.4] font-NotoSerifTibetan">ཞ</span><div class="text-gray-500">ja</div></div><i class="opacity-0 transition-opacity hover:text-violet-600 inline-block w-32 h-32 p-8"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.54,16.54a1,1,0,0,1-.71-.3,1,1,0,0,1,0-1.41,4,4,0,0,0,0-5.66,1,1,0,0,1,1.41-1.41,6,6,0,0,1,0,8.48A1,1,0,0,1,15.54,16.54Z" class="fill-gray-800 dark:fill-gray-400"></path><path d="M11.38,4.08a1,1,0,0,0-1.09.21L6.59,8H4a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2H6.59l3.7,3.71A1,1,0,0,0,11,20a.84.84,0,0,0,.38-.08A1,1,0,0,0,12,19V5A1,1,0,0,0,11.38,4.08Z" class="fill-gray-800 dark:fill-gray-400"></path></svg></i></a></div><div class="block" style="width: 132px; margin-left: 4px; margin-right: 4px; z-index: 2;"><a class="[&_i]:hover:opacity-100 hover:text-violet-600 transition-colors flex flex-col gap-8 items-center" rowindex="3" columnindex="3" href=""><div class="flex flex-col items-center"><span class="block font-semibold text-6xl leading-[1.4] font-NotoSerifTibetan">ཟ</span><div class="text-gray-500">za</div></div><i class="opacity-0 transition-opacity hover:text-violet-600 inline-block w-32 h-32 p-8"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.54,16.54a1,1,0,0,1-.71-.3,1,1,0,0,1,0-1.41,4,4,0,0,0,0-5.66,1,1,0,0,1,1.41-1.41,6,6,0,0,1,0,8.48A1,1,0,0,1,15.54,16.54Z" class="fill-gray-800 dark:fill-gray-400"></path><path d="M11.38,4.08a1,1,0,0,0-1.09.21L6.59,8H4a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2H6.59l3.7,3.71A1,1,0,0,0,11,20a.84.84,0,0,0,.38-.08A1,1,0,0,0,12,19V5A1,1,0,0,0,11.38,4.08Z" class="fill-gray-800 dark:fill-gray-400"></path></svg></i></a></div><div class="block" style="width: 132px; margin-left: 4px; margin-right: 4px; z-index: 2;"><a class="[&_i]:hover:opacity-100 hover:text-violet-600 transition-colors flex flex-col gap-8 items-center" rowindex="3" columnindex="4" href=""><div class="flex flex-col items-center"><span class="block font-semibold text-6xl leading-[1.4] font-NotoSerifTibetan">འ</span><div class="text-gray-500">hɦ</div></div><i class="opacity-0 transition-opacity hover:text-violet-600 inline-block w-32 h-32 p-8"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.54,16.54a1,1,0,0,1-.71-.3,1,1,0,0,1,0-1.41,4,4,0,0,0,0-5.66,1,1,0,0,1,1.41-1.41,6,6,0,0,1,0,8.48A1,1,0,0,1,15.54,16.54Z" class="fill-gray-800 dark:fill-gray-400"></path><path d="M11.38,4.08a1,1,0,0,0-1.09.21L6.59,8H4a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2H6.59l3.7,3.71A1,1,0,0,0,11,20a.84.84,0,0,0,.38-.08A1,1,0,0,0,12,19V5A1,1,0,0,0,11.38,4.08Z" class="fill-gray-800 dark:fill-gray-400"></path></svg></i></a></div><div class="block" style="width: 132px; margin-left: 4px; z-index: 2;"><a class="[&_i]:hover:opacity-100 hover:text-violet-600 transition-colors flex flex-col gap-8 items-center" rowindex="3" columnindex="5" href=""><div class="flex flex-col items-center"><span class="block font-semibold text-6xl leading-[1.4] font-NotoSerifTibetan">ཡ</span><div class="text-gray-500">ya</div></div><i class="opacity-0 transition-opacity hover:text-violet-600 inline-block w-32 h-32 p-8"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.54,16.54a1,1,0,0,1-.71-.3,1,1,0,0,1,0-1.41,4,4,0,0,0,0-5.66,1,1,0,0,1,1.41-1.41,6,6,0,0,1,0,8.48A1,1,0,0,1,15.54,16.54Z" class="fill-gray-800 dark:fill-gray-400"></path><path d="M11.38,4.08a1,1,0,0,0-1.09.21L6.59,8H4a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2H6.59l3.7,3.71A1,1,0,0,0,11,20a.84.84,0,0,0,.38-.08A1,1,0,0,0,12,19V5A1,1,0,0,0,11.38,4.08Z" class="fill-gray-800 dark:fill-gray-400"></path></svg></i></a></div></div></div></div>
Right click on the HTML to inspect after running the above example to see.
Why is the gray area (behind the blue square), stretching outside of the blue square? The gray area is the hoverable area of the .block area, which is the same as the ::selection area of the E-shaped glyph. But the blue square is the bounding box of the div. Why isn't it covering the entire glyph?
I played with line-height a lot, but shouldn't it work fine without touching line height? And I still couldn't get it to work with changing line-height on every element in the DOM tree. I tried to narrow it down to a deliverable isolated example, but every time I started from scratch to reproduce, I couldn't reproduce, so something funky is occurring with my configuration of CSS classes.
Upvotes: 0
Views: 39
Answers (0)
Related Questions
- How to make the react-day-picker wide to fill all the screen in a web app mobile version
- How to inline+wrap elements and their children in a flex container?
- I'm trying to make scrollable and clickable section but its scroll and onclick scroll not working
- Is it fine if I use Bootstrap rows as flex containers for its child divs, instead of using columns?