div 内的图像在图像下方有额外的空间 [英] Image inside div has extra space below the image
问题描述
为什么在 在该行下方有空格,p 和 q.
您可以:
- 调整
vertical-align
将其放置在其他位置(例如middle
)或 - 更改
display
使其不是内联的.
div {边框:纯黑色1px;底边距:10px;}#align-middle img {垂直对齐:中间;}#align-base img {垂直对齐:底部;}#显示图片{显示:块;}
<h1>默认</h1>敏捷的棕色狐狸跳过懒狗 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""><div id="align-middle"><h1>垂直对齐:中间</h1>敏捷的棕色狐狸跳过懒狗 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
<div id="align-base"><h1>垂直对齐:底部</h1>敏捷的棕色狐狸跳过懒狗 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
<div id="显示"><h1>显示:块</h1>敏捷的棕色狐狸跳过懒狗 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
包含的图片是公共领域的,并且来源来自维基共享资源
Why in the following code the height of the div
is bigger than the height of the img
? There is a gap below the image, but it doesn't seems to be a padding/margin.
What is the gap or extra space below image?
#wrapper {
border: 1px solid red;
width:200px;
}
img {
width:200px;
}
<div id="wrapper">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
By default, an image is rendered inline, like a letter so it sits on the same line that a, b, c and d sit on.
There is space below that line for the descenders you find on letters like g, j, p and q.
You can:
- adjust the
vertical-align
of the image to position it elsewhere (e.g. themiddle
) or - change the
display
so it isn't inline.
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>
The included image is public domain and sourced from Wikimedia Commons
这篇关于div 内的图像在图像下方有额外的空间的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!