div底部随机5 px空间
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.
我还没有在Chrome以外的任何浏览器中对此进行过测试,但是横幅的高度会增加额外的5px。剥离样式和元素以使其仅仅是图像和包含横幅时,间隙仍然存在。我在标题中加入了一个g来证明这是有问题的。
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?
有人可以解释发生了什么,以及如何解决它?
2 个解决方案
#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".
默认情况下,图像是内嵌元素,其底边位于基线上。基线下方有少量空间(前导),以便为某些字母(如“y”或“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>