<figure> element wrapping an <amp-img> element is mis-sized

[schlessera]

What's the issue?

When wrapping an element with layout="intrinsic" in a

element, the wrapping has a height that is a few pixels larger then the image it wraps.

This problem seems to be unrelated to any CSS being parsed, so I assumed this is JavaScript behavior inside the element that is broken.

How do we reproduce the issue?

Markup to reproduce:

<figure>
    <amp-img src="https://via.placeholder.com/580x300"
             width="580"
             height="300"
             layout="intrinsic"></amp-img>
</figure>

See https://codepen.io/schlessera/pen/BaaKaxo

What browsers are affected?

Tested in Google Chrome Version 77.0.3865.120 (Official Build) (64-bit)

Which AMP version is affected?

Seen in version 1910071803120.

[westonruter]

I think this might just be a CSS issue and may not be a problem with AMP. See ampproject/amp-wp#3493 (comment)

[schlessera]

The problem seems to stem from the fact that AMP sets the <amp-img> with an intrinsic layout to display: inline-block;, whereas the original image was styled to be display: block;.

I'm closing this issue as being a CSS problem, not a bug.