使锚父适合子图像

Question

How do you get rid of the element outline that the a tag inserts, without ruining the child element?

<a href="">
     <img alt="picsum" src="https://picsum.photos/200/300">
</a>

Ideally highlighting the anchor tag should yield the full width and height of the child element

Answer 1

display: block should fix this issue:

 a, img { display: block; }

 <a href=""> <img alt="picsum" src="https://picsum.photos/200/300"> </a>

What's happening is the <a> and img are display: inline by default, which creates extra space underneath them as inline is made to work well with text. It may seem stupid that things are this way but it allows an image to fit in nicely with text like you would do in a word processor.