Fix weird layout bug with images in links

[GuillaumeGomez]

While working on #3127, I uncovered this bug when pressing tab around:

What you see is the link being focused (an image cannot be focused unless we add tabindex to it, which we don't want) when you have an image inside a link (an <img> inside a <a>). To fix, we simply need to make <img> display: block. Once done, we have the expected result:

(still not the <img> focused, it's the <a>, but with the correct layout)

[ehuss]

This doesn't quite seem like the correct fix to me because it will cause all images to be block displayed instead of inline. This might change the rendering when it is intended for the image to be inline. As a basic example, look at the badges in this repo's README file, and how they are rendered side-by-side. This would force them to be stacked.

How about instead we change the a to have inline-block display instead, like:

Suggested change

	.content img { display: block; }
	/* When an image is inside an anchor, ensure the focus ring covers the entire
	image instead of the anchor's line box. */
	.content a:has(img) { display: inline-block; }

View changes since the review

[GuillaumeGomez]

Ah interesting, didn't think about that. I'll add a GUI test as well.

[GuillaumeGomez]

Added the GUI test to ensure the links containing images have the expected size and also that they work correctly side by side.