Random 5 px space at the bottom of the div

Question

Random 5 px space at the bottom of the div

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 tested this in any browsers besides Chrome yet, however added 5px is added to the height banner

. When you remove styles and elements, so it's only an image and the containing banner

whitespace is still present. I've included g in title

to demonstrate how problematic it is.

At first I thought it had something to do with the nature of inline elements and the ww browser considering line / tab breaks in the code as a space. However, condensing down to just one line, the problem remained.

Can someone please explain what is happening and how to fix it?

+3

html css

sharf May 07 '15 at 11:26 PM

source to share

2 answers

This issue is related to the layout img

, which is similar inline

, you can change it to block

to solve the problem:

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

JSFiddle

Or, you can also change the default img

vertical alignment from baseline

to top

, suppressing the top padding:

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

JSFiddle

+3

potashin 07 May '15 at 23:30

source to share

Marc audet · Accepted Answer · 2015-05-07T23:30:56+0000

Make your image a box or inline:

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

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

By default, images are inline elements with their bottom edge on the baseline. There is a small amount of space (leading) below the baseline to provide space for descenders of certain letters, such as "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>

Run code Hide result

Reference:

If you look at the CSS2 spec:

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

read the section related to vertical-align

, in particular baseline

, which reads:

Align the baseline with the base of the original field. If the box does not have a baseline, align the bottom edge with the original baseline.

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

Random 5 px space at the bottom of the div

More articles: