Removing Extra Space Underneath An Image

You have already applied normalize.css but there is still additional white space underneath an image. This is because the browsers by default will recognize the images as an inline-element, hence additional “line-height” is apply.

For example, key in the following html:

<div style='border:1px solid red;'>
 <img src='marvel.jpg'/>
</div>

Noticed that extra space (line-height)?

Solution:

1. Either add in “display:block” to the image

   <div style='border:1px solid red;'>
    <img src='marvel.jpg' style='display:block;'/>
   </div>
   

2. Or add in “line-height:0” to the containing dom

   <div style='line-height:0;border:1px solid red;'>
    <img src='marvel.jpg'/>
   </div>