为什么在following code div
的高度大于 img
的高度?图像下方有一个间隙,但它似乎不是填充/边距。
图片下方的空隙或额外空间是什么?
#wrapper {
border: 1px solid red;
width:200px;
}
img {
width:200px;
}
<div id="wrapper">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
最佳答案
默认情况下,图像是内嵌渲染的,就像字母一样,所以它与 a、b、c 和 d 位于同一行。
descenders 行下方有空间你可以在 g、j、p 和 q 等字母上找到。
您可以:
- 调整
vertical-align
将其定位到其他位置(例如中间
)或 - 更改
显示
,使其不是内联的。
div {
border: solid black 1px;
margin-bottom: 10px;
}
#align-middle img {
vertical-align: middle;
}
#align-base img {
vertical-align: bottom;
}
#display img {
display: block;
}
<div id="default">
<h1>Default</h1>
The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>
<div id="align-middle">
<h1>vertical-align: middle</h1>
The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>
<div id="align-base">
<h1>vertical-align: bottom</h1>
The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>
<div id="display">
<h1>display: block</h1>
The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>
包含的图像是公共(public)领域和 sourced来自维基共享资源
关于html - div 中的图像在图像下方有额外的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36888899/