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; }