Div-Element automatisch größer als angegeben?

Question

Egal wie sehr ich versuche, diese div 40px groß zu machen, es ist height wird immer größer.

Hier ist ein Beispiel HTML:

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

Ich hoffe, dass die Absicht ist klar: Die div nur so groß wie das Bild im Inneren es sein sollte.

Da die Innen Bild 40px groß ist, würde ich die div erwartet auch seine 40px groß.

Allerdings ist es nicht. Es wird immer größer. Ich habe background-color auf rot gesetzt prominent das Problem zu zeigen:

Ja, das oben ist genau das, was Firefox zeigt mir. Ich habe auch IE 11 versucht, mit den gleichen Ergebnissen.

Ich habe versucht, Firefox Inspektor zu betrachten. Es scheint, dass Firefox aus irgendeinem Grund die div Höhe auf 44.5px setzt.

Warum tritt dies auf? Wie kann man dieses Verhalten stoppen?

Answer 1

weil img ein Inline-Element ist der Raum deshalb schafft, müssen Sie img eingestellt als Blockebene angezeigt werden, und Sie werden nicht brauchen etwas anderes in der div

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

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

UPDATE von den Anmerkungen,

Das Problem ist, dass ich irgendwie zwei Bilder in diesem div brauche, einen neben einander.

Verwenden Sie stattdessen 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">