title: Why the parent height is not the same is inner image height?
body: <p>I have been working on css for a while, but I was confused why the parent height is not the same as the inner image height, given the following code.</p>
  
  <pre><code>&lt;div style="width:200px"&gt;
      &lt;img style="max-width:100%;" src="http://localhost:8888/example/06f1e47fbdb03e48203ebfba/66932afa697bdbc76a1a291e/thumb_d90ab4a531969620e2c2a160.jpg"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I was expect that the parent div would expand correspondingly with different image. The fact is that the inner image is 200*200, and the outer div is 200*206, and I have no idea where does the extra 6 pixels comes from. <strong>There is are padding for the outer div or margin for the inner image</strong>. Could someone explain why this happens?</p>