htmlcsstailwind-css

Why nested inner span is taller than its outer span

Tailwind Playground

Let me use tailwind css for simplicity.

There are two HTML span elements, #outer and #inner.

<p class="font-mono">
  abc<span id="outer" class="relative"><span id="inner" class="absolute left-0 top-0">a</span>a</span>defg
</p>

I expect #inner overlaps with #outer, but instead the actual result shows that the painted characters of #inner is slightly lower than #outer: enter image description here

Then I check the dev console and find outer's height is 19px, but inner is 24px.

Why does it happen? What's the correct way to make them overlap with each other?

Solution

  • Try removing left-0 top-0

    <p class="font-mono">
  abc<span id="outer" class="relative"><span id="inner" class="absolute">a</span>a</span>defg
</p>

    Result:

    enter image description here