Dave's Brain

Browse - Programming Tips - html: Why is there space under my img that's inside a a ?

Date: 2017dec7
Language: html
Keywords: hover, white

Q.  html: Why is there space under my <img> that's inside a <a> ?
eg <a href='#'><img src='myimg.png'></a>

A. <img> is display:inline-block by default so its laid out like a letter that
sits on the text baseline.  The gap is caused by the space provided for the letter's descender (eg the bottom of a "y")

There are two solutions (with css):

a img { display: block; }
Or
a img { vertical-align: bottom; }

Add a comment

Sign in to add a comment
Copyright © 2008-2018, dave - Code samples on Dave's Brain is licensed under the Creative Commons Attribution 2.5 License. However other material, including English text has all rights reserved.