Dont know where the padding/margin comes from

Question

I'm working an a site and experiencing a weird issue with an image in a block element. When placing this image in a block, with all the padding and margins set to 0, there still as a space underneath the image. Here's the code:

<section class="page-block">
    <div class="wrapper">
        <img src="http://navelpluisje.nl/theme/navelpluisje/images/ik.png"/>
    </div>
</section>


.page-block {
    position: relative;
    background: red;
    margin: 0;
    padding: 0;
}
.wrapper {
    position: relative;
    width: 200px;
    margin: 0 auto;
    padding: 0;
}
img {
    width: 200px;
    background: white;
}

I've created a jsFiddle overhere with the problem.

I've tested it on windows and osx on several browsers and they all have the same issue.

Does anyone know where this comes from?

Thanx

Answer 1

You need to set the vertical-align top as demonstrated in the following JSFIDDLE.

img {
width: 200px;
background: white;
vertical-align:top;
}

Truth be told, I found this answer with the following SO Question. Which explains the following:

By default, an image is rendered inline, like a letter. It sits on the same line that a, b, c and d sit on. There is space below that line for the descenders you find on letters like f, j, p and q. You can adjust the vertical-align of the image to position it elsewhere.

Answer 2

Its caused by the default display property, inline, of img tag. You can change it to block to get rid of that white space

img {
 display: block; 
}

reference for inline-block

Answer 3

Use below CSS Code:

CSS

img {
width: 201px;
background: white;
/* height: 100%; */
vertical-align: bottom;
}