Link boundaries for links contaning images look bad

[mahu2401]

In 4.8, the new link boundaries were introduced. For normal links they are fine and they highlight the link really nice.

But if there's an image (inline-block element) in the link, the link boundaries look quite ugly. This is the case when you embed an image from the media library. The following code was used to generate the screenshot:

[caption id="..." align="alignnone" width="300"]<a href="IMAGE_FILE"><img class="size-medium ..." src="IMAGE_FILE" alt="Test" width="300" height="200" /></a> Test[/caption]

If you click on the image, two narrow link boundary markers appear above and below the image (see screenshot). These are taking up extra vertical space, so the image 'jumps' a bit.

Maybe it would be the best to disable the link boundary feature for links containing only images, in my opinion they don't provide any useful information and may irritate the user.

[danielbachhuber]

I can reproduce this against trunk in FF 57.

It seems to be impacted by alignment; a linked image with alignment exhibits the problem, while a linked image without alignment does not.

I imagine it's related to the fact that an image with .aligncenter is defined to be a block element inside of an inline-block element.

[danielbachhuber]

I agree with the assessment that link boundaries should be disabled for images. My understanding of link boundaries is that they're meant to communicate when linked text ends, which isn't necessary with an image.