Question

我在此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;
}

我还没有在Chrome以外的任何浏览器中对此进行过测试，但是在banner的高度上添加了额外的5px。剥离样式和元素时，它只是图像和包含banner的差距仍然存在。我在title中加了一个g来证明这是有问题的。

我起初认为这是由于内联元素的性质和浏览器将代码中的换行符/制表符作为空白区域考虑在内。然而，当将它们全部冷凝成一条线时，问题仍然存在。

有人可以解释发生了什么，以及如何解决它？

Answer 1

使图像成为块或内联块元素：

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

请参阅：http://jsfiddle.net/audetwebdesign/cf6vwy5h/

默认情况下，图像是内嵌元素，其底边位于基线上。基线下方有少量空间（前导），以便为某些字母的下降部分留出空间，例如＆＃34; y＆＃34;或＆＃34; j＆＃34;。

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

<强>参考：

如果你看一下CSS2规范：

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

阅读与vertical-align相关的部分，具体而言，baseline，其中包含：

将框的基线与父框的基线对齐。如果框没有基线，将底边边缘对齐父母的基线。

图像是替换元素，没有基线;因此，它们的底边与包含块的基线对齐，这就是图像下方和父块边缘的小垂直空间。

Answer 2

此问题归因于img布局，与inline类似，您可以将其更改为block以解决问题：

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

JSFiddle

或者您也可以将img默认垂直对齐方式从baseline更改为top，从而抑制缩进：

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

JSFiddle

div底部随机5 px空间

2 个答案: