Fixing the size of the a href to match with an image


If you’ve ever run into the issue that the <a href> wrapping an image isn’t the same height or width as the image it’s wrapping, you can often fix this discrepancy with simple CSS.

The CSS that will likely help you make the link fit the same size as the image is to make the link display: block.

In this code snippet, you can see I’m using the class .block to apply display:block.

<a class="block">href=""> <img src="" /> </a>

a.block {
display: block;

Happy Coding!

About the author

Kelly Barkhurst

Designer to Fullstack is my place to geek out and share tech solutions from my day-to-day as a graphic designer, programmer, and business owner (portfolio). I also write on Arts and Bricks, a parenting blog and decal shop that embraces my family’s love of Art and LEGO bricks!

Add comment

By Kelly Barkhurst

Recent Posts