div要素が自動的に指定よりも大きくなっていますか？

Question

私はこれを作ることをいかに困難にしても、divは40pxの高さで、それはheightが大きくなっています。

div { 
 
    /* To prove the div does get larger */ 
 
    display: table; 
 
    background-color: red; 
 
    /* Not even explicitly setting height to 40px helps: */ 
 
    height: 40px; 
 
    max-height: 40px; 
 
    /* Ofc, problem occurs also without these two lines. */ 
 
}

<div> 
 
    <img src="http://placehold.it/350x40"> 
 
</div> 
 
<img src="http://placehold.it/350x40">

JsFiddle

私が意図することを願っていますが明確である：

はここでサンプルHTMLでdivはそれだけ内の画像と同じ大きさでなければなりません。

内部の画像は40pxなので、divは40pxと高くなると思います。

ただし、そうではありません。それは大きくなり続けます。私は目立つような問題を示すために、赤にbackground-colorを設定しました：

うん、上記は、Firefoxが私を示したまさにです。私は同じ結果を得てIE 11も試しました。

私はFirefoxのインスペクタを見てみました。何らかの理由でFirefoxがdivの高さを44.5pxに設定しているようです。

これはなぜ発生するのですか？どのようにこの動作を停止するには？

Answer 1

imgは、インライン要素は、そのためのスペースを作成しているため、あなたはブロックレベルとして表示するimgを設定する必要があります。また、div

div { 
 
    display: table; 
 
    background: red 
 
} 
 
img { 
 
    display: block 
 
}

<div> 
 
    <img src="http://placehold.it/350x40"> 
 
</div> 
 
<img src="http://placehold.it/350x40">

に何かを必要としません更新コメントから、

問題は、私はちょうど の隣に、このdivに2つの画像が必要であるということです。

inline-blockを代わりに使用してください。

div { 
 
    display: table; 
 
    background: red; 
 
    font-size: 0 /* updated from comments */ 
 
} 
 
img { 
 
    display: inline-block /* updated from comments */ 
 
}

<div> 
 
    <img src="http://placehold.it/175x40"> 
 
    <img src="http://placehold.it/175x40"> 
 
</div> 
 
<img src="http://placehold.it/350x40">