img标签之后的奇怪空白

我似乎无法摆脱<img>和<div>之间的空间（红色）。这是尽可能少的，因为我可以得到它。img标签之后的奇怪空白

我发现在其他一些类似的线程上，这个问题通常是由于inline-box元素之间的空白或换行符造成的。这里不是这种情况。

如何摆脱空间？

div { 
 
    display: inline-block; 
 
    width: 5em; 
 
} 
 

 
#container { 
 
    background-color: #F00; 
 
} 
 

 
img { 
 
    background-color: #AFA; 
 
    width: 5em; 
 
    height: 4em; 
 
} 
 

 
#child { 
 
    background-color: #AAF; 
 
}

<div id="container"> 
 
    <img src="404"><div id="child">CHILD</div> 
 
</div>

来源

2017-02-18 Jeroen Bollen

将'img'元素的'display'改为'block'，或将'vertical-align：top'添加到'img'元素。 –

请记住，默认情况下，图像是内联级元素，它接收基线对齐：http://stackoverflow.com/a/31445364/3597276 –

@JoshCrozier这比我想象的要容易得多！那为什么呢？ –

添加vertical-align: middle;或display: block;您img{} -rules。

来源

2017-02-18 23:05:19 user6003859

img标签之后的奇怪空白

回答

相关问题