Fit anchor parent to child image-CodePudding

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

CodePudding user response：

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.