天坑——img作为行内元素的坑

一个很简单的场景。图片宽度固定高度自适应：

但离谱的现象出现了，如图：

外层div设置width固定像素，内层img设置height：auto， width：100%

so？为什么外层div比img要高一块（img居中是因为有全局样式，但div高了一块是实打实。 ）

直接上答案，因为img默认行内元素。默认有个行高是1.5。图片比内容矮了。外层被内部撑开了。只需将img设置display：block即可