奇妙な空白タグ

Question

をのimgた後、私は<img>と<div>の間にスペース（赤）を取り除くように見えることはできません。これは私が得ることができるように最小限です。

私は問題がしばしば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>

Answer 1

あなたimg{} -rulesにvertical-align: middle;またはdisplay: block;を追加します。