为什么在下面的代码div的高度大于img的高度?图像下方有一个空白，但它似乎不是填充/边距。
图像下方的空隙或额外空间是什么?
#包装{ 边框:1px纯红色; 宽度:200 px; ｝ img { 宽度:200 px; ｝ < div id = "包装" > <img src="http://i.imgur.com/RECDV24.jpg" /> < / div >
当前回答
你可以使用几种方法来解决这个问题
使用行高 #包装{line-height: 0px;｝ 使用显示:flex #包装{显示:flex;｝ #包装器{显示:inline-flex;｝ 使用显示:块，表，伸缩和继承 #包装img{显示:块;｝ #包装img{显示:表;｝ #包装img{显示:flex;｝ #包装img{显示:继承;｝
其他回答
我发现它使用display:block很棒;在图像上并垂直对齐:top;在文本上。
.imagebox { width:200px; float:left; height:88px; position:relative; background-color: #999; } .container { width:600px; height:176px; background-color: #666; position:relative; overflow:hidden; } .text { color: #000; font-size: 11px; font-family: robotomeduim, sans-serif; vertical-align:top; } .imagebox img{ display:block;} <div class="container"> <div class="imagebox"> <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span> </div> <div class="imagebox"> <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span> </div> <div class="imagebox"> <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span> </div> <div class="imagebox"> <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span> </div> <div class="imagebox"> <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span> </div> <div class="imagebox"> <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span> </div> </div>
或者你可以编辑代码JS提琴
你所要做的就是分配这个属性:
img {
display: block;
}
图片默认有这个属性:
img {
display: inline;
}
你也可以设置overflow: hidden;对于容器，将图像的高度增加到> 100%。高度:100%;
默认情况下，图像是内联呈现的，就像字母一样，因此它与a、b、c和d位于同一行。
在这条线下面有空间是g、j、p和q等字母的降序。
您可以:
调整图像的垂直对齐，以将其定位在其他位置(例如中间)或 更改显示，使其不是内联的。
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>
所包含的图片是公共领域的，来自维基共享资源
你可以使用几种方法来解决这个问题
使用行高 #包装{line-height: 0px;｝ 使用显示:flex #包装{显示:flex;｝ #包装器{显示:inline-flex;｝ 使用显示:块，表，伸缩和继承 #包装img{显示:块;｝ #包装img{显示:表;｝ #包装img{显示:flex;｝ #包装img{显示:继承;｝
