Why does the link size not match the image size?

Question

css

The link size does not match the image size. How to fix it?

<div class="thumbnail">
<a href="<?php the_permalink(); ?>">
<?php $image_id = get_post_thumbnail_id(); ?>
<?php $image_attributes = wp_get_attachment_image_src( $image_id, 'full'); ?>
<img src="<?php echo $image_attributes[0]; ?>" width="100%">
</a>
</div>

Answer 1

You have spaces before and after the picture. Take them away.

Answer 2

The img tag is initially inline (inline) with vertical alignment along the baseline (vertical-align: baseline;). it is supposed to be surrounded by text, the text needs a place below, for "tails" (for example, like the letter "y") -> the picture has an indent from the bottom. You can solve it in two ways:
1) set display: block; for the picture
2) set vertical-align: bottom; or vertical-align: middle; for the picture