Why does the parent height not match the internal height of the image?

Question

I worked on css for a while, but I was confused why the height of the parent does not match the height of the internal image, given the following code.

<div style="width:200px">
    <img style="max-width:100%;" src="http://localhost:8888/example/06f1e47fbdb03e48203ebfba/66932afa697bdbc76a1a291e/thumb_d90ab4a531969620e2c2a160.jpg">
</div>

I expected the parent div to expand accordingly with another image. The fact is that the internal image is 200 * 200, and the external div is 200 * 206, and I do not know where the additional 6 pixels come from. There are spaces for the outer div or margins for the inner image . Can someone explain why this is happening?

Answer 1

Does this solve the problem? If not, which browser and OS are you using?

. , display: inline-block, , (, ). , , , display: block.

Answer 2

- , ?

, .

block, , vertical-align:bottom, .

Answer 3

Use display: block;

div {
  width:200px
}

img {
  max-width:100%;
  display: block;
}

<div>
    <img src="http://cadizinc.com/wp-content/uploads/2011/11/water_07-610x370.jpg">
</div>

Run codeHide result