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:
- Either add in “display:block” to the image
<div style='border:1px solid red;'> <img src='marvel.jpg' style='display:block;'/> </div>
- Or add in “line-height:0” to the containing dom
<div style='line-height:0;border:1px solid red;'> <img src='marvel.jpg'/> </div>