Space at Bottom of Div Containing Image

Image inside div has extra space below the image

By default, an image is rendered inline, like a letter so 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 g, j, p and q.

Demonstration of descenders

You can:

adjust the vertical-align of the image to position it elsewhere (e.g. the middle) or
change the display so it isn't inline.

div {  border: solid black 1px;  margin-bottom: 10px;}
#align-middle img {  vertical-align: middle;}
#align-base img {  vertical-align: bottom;}
#display img {  display: block;}

<div id="default"><h1>Default</h1>  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="Sample Image"></div>
<div id="align-middle"><h1>vertical-align: middle</h1>  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="Sample Image"> </div>    <div id="align-base"><h1>vertical-align: bottom</h1>  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="Sample Image"> </div>
<div id="display"><h1>display: block</h1>  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="Sample Image"></div>

Space at bottom of div containing image

Set your image to img { display: block; }. And please next time add your code here on SO to prevent link rot and lets us easily review your code here.

Why is there a space between the image and the div below?

The height of the image's container div ("top") is bigger than the height of displayed image.

The problem is that the above isn't necessarily true. The browser up- or down-scales the image to maintain proportions when you set a width, in this case width:100%. For instance, if your picture is 100x100, but the box it is in is 300px wide, the picture will be upscaled to be 300x300, thus higher than the container.

CSS: why there is a small gap at the bottom of the image inside an absolute div?

add display:block to image

.adHolder {  width:100%;  /*height: auto;*/  position:absolute;  bottom:0;  left:0;  /*border-top:solid 1px #fff;*/  padding:0;  margin:0;  z-index:1;}
.adHolder img {  width:100%;  height:100% !important;  padding:0 !important;  margin:0 !important;  border:none;  display: block;}

<div class="adHolder"><img src="http://via.placeholder.com/350x150"></div>

Remove white space below image

You're seeing the space for descenders (the bits that hang off the bottom of 'y' and 'p') because img is an inline element by default. This removes the gap:

.youtube-thumb img { display: block; }

Weird extra space in the bottom of a div

By default, inline elements are vertically aligned to the baseline. Now the navbar contains an image and the menu bar next to each other, so it has to shift these up and down a bit in order to align them.

Solution: give these things vertical-align:middle (or any other value that doesn't require shifting the blocks out of center).

div {  border: 1px solid #999;}body {  font-family: Verdana, sans-serif;  font-size: 17px;}#top > a > img {             /* this was added */  vertical-align: middle;}#navbar {  border-radius: 6px;  overflow: hidden;  display: inline-block;  margin: 0;  padding: 0;  vertical-align: middle;    /* and this */}#navbar ul {  list-style-type: none;  padding: 0;  margin: 0;  float: left;}#navbar ul li {  display: inline;  color: black;  text-decoration: none;}#navbar ul a {  float: left;  padding: 10px 18px;  text-decoration: none;  color: black;  background-color: #f1f1f1;  -webkit-transition: background-color 0.02s;  transition: background-color 0.02s;}#navbar ul a:hover {  background-color: #e6e6e6;}#navbar ul a:selected {  background-color: #c7c7c7;}#content {  padding: 35px 50px 60px 50px;}#container {  width: 900px;  margin: 20px auto;  border-radius: 5px;  box-shadow: 0px 2px 2px 1px #d5d5d5;}

<div id="container">
  <div id="top">    <a href="#">      <img alt="logo" height="27" src="http://static.tumblr.com/zicio7x/Tphntwm0j/yvemiro.svg">    </a>    <div id="navbar">      <ul>        <li><a href="#">Link 1</a>        </li>        <li><a href="#">Link 2</a>        </li>        <li><a href="#">Link 3</a>        </li>        <li><a href="#">Link 4</a>        </li>      </ul>    </div>  </div>  <div id="content">    Content  </div></div>

IMG has 5px extra padding at bottom of div

use the following css: working jsFiddle

img{display:block;}

Images are by default displayed inline - which causes the padding below the image. (because of line-height)

Extra space on bottom of div with responsive background image

This Is The Working Code:

<html>
    <head>
        <title>MissLand</title>
        <style type="text/css">
            html, body{
                padding: 0;
                margin: 0;
                width: 100%;
                height: 100%;
                text-align: center;
            }

            #Container{
                text-align: center;
                height: 100vh;
                width: 100vh;
                position: relative;
                display: inline-block;
            }

            #Header{
                background: url("./h.jpg");
                min-height: 208px;
                position: absolute;
                left: 0px;
                top: 0px;
                z-index: 2;
            }

            #Body{
                background: url("./b.jpg");
                max-width: 600px;
                min-height: 50px;
                width: 100%;
                float: left;
                clear: both;
                position: absolute;
                left: 0px;
                top: 0px;
                bottom: 0px;
                z-index: 0;
            }

            #Footer{
                background: url("./f.jpg");
                min-height: 380px;
                position: absolute;
                bottom: 0;
                left: 0;
                z-index: 1;
            }

            #Header, #Footer{
                background-repeat: no-repeat;
                background-size: contain;
                background-clip: border-box; 
                width: 100%;
                float: left;
                clear: both;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="Container">
            <div id="Header"></div>
            <div id="Body"></div>
            <div id="Footer"></div>
        </div>
    </body>
</html>