div容器内的图像底部有5px的间隙

Question

If you go to my Website that i am working on:

http://lastdeath.de/kaufmannmike/wallpaper.html

You can see 2 images ( img ) both inside 2 different div elements. Something is weird there. The images have 5 bottom pixels, even if I don't set it anyways. I've just put an img element in a class="content" and then in div id="breaker/boxer" , nothing really complicated.

But the code just don't want to work.

i can make a line code of an img , then there are no problems with these 5 pixels on the bottom. But i need to put the img in a div container.

Code:

 body { background-color: #fafafa; margin: 0; padding: 0; } .content { overflow: hidden; padding-top: 80px; } img { height: 100%; width: 100%; } 

 <div class="content"> <div max-height="480px" id="breaker"> <img src="http://lastdeath.de/kaufmannmike/img/2_work/wallpaper/breaker-wallpaper_long.jpg"> </div> <div id="boxer"> <img src="http://lastdeath.de/kaufmannmike/img/2_work/wallpaper/boxer-wallpaper_long.jpg"> </div> </div> 

How to fix this?

Answer 1

just set your img to display:block

why? because default value of img is display:inline

so instead of this:

img {
    height: 100%;
    width: 100%;
}

you should have this:

img {
    display:block;
    height: 100%;
    width: 100%;
}

Here is a working snippet based on your code taken from your site:

 body { background-color: #fafafa; margin: 0; padding: 0; } .content { overflow: hidden; padding-top: 80px; } img { display:block; height: 100%; width: 100%; } 

 <div class="content"> <div max-height="480px" id="breaker"> <img src="http://lastdeath.de/kaufmannmike/img/2_work/wallpaper/breaker-wallpaper_long.jpg"> </div> <div id="boxer"> <img src="http://lastdeath.de/kaufmannmike/img/2_work/wallpaper/boxer-wallpaper_long.jpg"> </div> </div>