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?
source to share
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>
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.
source to share
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;
}
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;
}
source to share