0

I have a relatively simple setup inside part of my website:

<body>
<!-- ... a few <div> ... -->
    <div class="root"><div><a><span></span></a></div></div>
<!-- ... a few </div> ... -->
</body>
  • The body is white-space: nowrap and font-size: 0px.
  • The outer div.root is display: grid with an explicit, static width and height. Single row/column of min-content.
  • The inner div is display: block with no explicit height.
  • The a is display: inline-block. It has padding but no explicit height. line-height and font-size are explicitly 0.
  • The span is display: inline-block with height: 100%. It is completely empty.

JSFiddle example

In the JSFiddle example the span (which would be pictured as a red rectangle below) is 0 height regardless of the a's padding. This is what I would expect.

x

But on my website the span's height is controlled by the a's padding! If the a's padding is 100px then the span's height is 100px. If the a's padding is 0 then the span's height is 0. If I explicitly set the a's height to any value (including fit-content) other than auto the behavior goes away and the span's height ignores the padding of a (as in the JSFiddle example). Also, the div doesn't seem to be accounting for the height of the span/a.

x x x x

Neither border-box or content-box settings for box-sizing (applied to all elements) make a difference (in both the JSFiddle and my website). The only notable difference between the example and my website is that on my website the above setup is contained within other elements. I've checked the whole ancestor chain for anything that might lead to this behavior, but I can't find anything.

Does anyone have any suggestions to try to find the culprit? Can anyone reproduce the behavior I'm seeing on my website?

Browser: Microsoft Edge 103.0.1264.62

Element JSFiddle My Website
div.root x x
div x x
Why is this height 30px when the a is height 60px?
a x x
span x x
Marco van Hilst
  • 579
  • 5
  • 11
  • 1
    did you declare the and the beginning of your HTML file? – Temani Afif Jul 30 '22 at 09:37
  • @TemaniAfif Dammit!! Quirks Mode strikes again! There was some HTML before the that shouldn't have been there. Removing it eliminated the weird behavior. Thank you, please write an answer and I'll credit you – Marco van Hilst Jul 30 '22 at 18:53

0 Answers0