为什么div 包裹img,div 高度大于img,及解决方案

why?

this is a natural behavior of image because img is an inline element so user agents leave some space for descender characters.

How Inline Content is Constructed

In order to understand what just happened, let's take a look at the construction of a line box, the placement of images within a line box, and the placement of a line box within a table cell. First a basic line box containing text, shown in Figure 3.

🖼 图片占位（归档模式）图片见原始导出：

%E4%B8%BA%E4%BB%80%E4%B9%88div%20%E5%8C%85%E8%A3%B9img%2Cdiv%20%E9%AB%98%E5%BA%A6%E5%A4%A7%E4%BA%8Eimg%2C%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88.assets/0.6068644649036881.png

The most crucial part of Figure 3 is the baseline (represented by the blue line), and its placement within the line box. The baseline's exact placement is dependent on the "default" font for the line box (represented by the red box), which is determined by the value of font-family for the element that contains the line box. It isn't possible for an author to change the baseline's position directly, so wherever it ends up is where it will be. The space below the baseline is referred to as "descender space" since that's where the descenders in lowercase letters like "j", "y", and "q" are drawn. Figure 4 shows what happens when we add an image to the mix.

🖼 图片占位（归档模式）图片见原始导出：

%E4%B8%BA%E4%BB%80%E4%B9%88div%20%E5%8C%85%E8%A3%B9img%2Cdiv%20%E9%AB%98%E5%BA%A6%E5%A4%A7%E4%BA%8Eimg%2C%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88.assets/0.507115991365362.png

Note where the image sits by default: its bottom edge is aligned with the baseline of the line box. This placement can be changed with vertical-align-- we'll talk about that in a bit-- but almost nobody ever changes the value from its default. Let's take away the text, and leave only the image, as was done in Figure 5.

🖼 图片占位（归档模式）图片见原始导出：

%E4%B8%BA%E4%BB%80%E4%B9%88div%20%E5%8C%85%E8%A3%B9img%2Cdiv%20%E9%AB%98%E5%BA%A6%E5%A4%A7%E4%BA%8Eimg%2C%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88.assets/0.7555122195907706.png

So we have an image sitting on the baseline of a line box that contains only the image. Now consider what happens when we put that line in a table cell (Figure 6).

🖼 图片占位（归档模式）图片见原始导出：

%E4%B8%BA%E4%BB%80%E4%B9%88div%20%E5%8C%85%E8%A3%B9img%2Cdiv%20%E9%AB%98%E5%BA%A6%E5%A4%A7%E4%BA%8Eimg%2C%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88.assets/0.47688379730851427.png

And there you have it-- spaces opening up where none have ever been seen before. It gets even worse with small images, like ones that are one pixel tall, as illustrated in Figure 7.

how?

you can remove it with css:

img { display:block; } or img { vertical-align:bottom; }

基线、底线、顶线、中线

注意：基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿。

参考：http://sojuker.blog.163.com/blog/static/1387908792012760243916/

https://developer.mozilla.org/en-US/docs/Images,_Tables,_and_Mysterious_Gaps