Random 5 px space at bottom of div

Question

I have the following code in this fiddle:

HTML

<div id="overview">
    <div id="banner">
        <img src="http://www.placehold.it/1200x600"/>
        <div id="info">
            <div id="identity">
                <span id="name">Name</span><br/>
                <span id="title">Title of Name g</span>
            </div>
        </div>
    </div>
</div>

CSS

* {
    box-sizing:border-box;
}
#banner {
    width:100%;
    position:relative;

}
#banner > img {
    width:100%;
}
#info {
    position:absolute;
    bottom:0;
    width:100%;
    text-align:center;
}
#identity {
    display:inline-block;
    text-align:left;
}
#name {
    font-size:2em;
    font-weight:bold;
}
#title {
    font-size:1em;
    font-weight:bold;
}

I have not yet tested this in any browsers besides Chrome, however there is an extra 5px being added to banner's height. When stripping out styles and elements so that it is just the image and the containing banner the gap is still present. I have included a g in the title to demonstrate how this is problematic.

I at first I thought it was due to the nature of inline elements and thew browser taking into account line breaks/tabs in the code as white space. However when condensing it all down to a single line, the problem remained.

Can someone explain what is going on, and how to fix it?

Answer 1

Make your image either a block or inline-block element:

#banner > img {
    width:100%;
    display: block;
}

See: http://jsfiddle.net/audetwebdesign/cf6vwy5h/

Be default, images are inline elements and their bottom edge is positioned on the baseline. There is a small amount of space (leading) below the baseline to allow room for the descenders of certain letters like "y" or "j".

* {
  box-sizing: border-box;
}
#banner {
  width: 100%;
  position: relative;
  border: 1px dashed blue;
}
#banner > img {
  width: 100%;
  display: block;
}
#info {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  border: 1px dotted blue;
}
#identity {
  display: inline-block;
  text-align: left;
}
#name {
  font-size: 2em;
  font-weight: bold;
}
#title {
  font-size: 1em;
  font-weight: bold;
}

<div id="overview">
  <div id="banner">
    <img src="http://www.placehold.it/1200x600" />
    <div id="info">
      <div id="identity">
        <span id="name">Name</span>
        <br/>
        <span id="title">Title of Name g</span>
      </div>
    </div>
  </div>
</div>

Reference:

If you look at the CSS2 specification:

http://www.w3.org/TR/CSS21/visudet.html#line-height

read the section related to vertical-align, specifically, baseline, which says:

Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.

Images are replaced elements and do not have a baseline; hence, their bottom edge is aligned with the baseline of the containing block, which is what gives the small vertical space below the image and the edge of the parent block.

Answer 2

This issue is due to img layout, that is similar to inline, you can change it to block to resolve the issue:

#banner > img {
  width:100%;
  display:block;
}

JSFiddle

Or you can also change img default vertical alignment from baseline to top, suppressing top indent:

 #banner > img {
  width:100%;
  vertical-align:top;
}

JSFiddle