![]()
外层 div 高度大于 ![]()
的原因
先看看如下的 HTML：
<!DOCTYPE html>
<div style="border:1px solid red; float:left; padding:0;"> <img src="xxx.jpg"></div>
在浏览器开发者工具中可以看到，div 的高度要高于 img 的高度，然而 div 本身并没有 padding。
尝试了各种解决的办法，一一说下：
- 去掉 DOCTYPE 声明，这倒是好了，可这是 HTML5 的标准声明，这肯定不是正解。
- 给 img 设置
display:block;样式 - 给 img 设置
vertical-align:bottom;样式 - 给 img 设置
float:left;样式 - 给 div 设置
line-height:0;样式。因为 line-height 属性继承自其父元素，所以要在其父元素上设置这个值就可以了 - 给 div 设置
font-size:0;样式 - 给 div 设置 height，值等同于图片，不过如果图片的高度不是固定的，就不太合适了
至于原因，初步怀疑和浏览器的 user agent stylesheet 有关。
在 https://developers.google.com/chrome-developer-tools/docs/settings 中，有这么一段描述：
The user agent refers to the browser. Each browser implements a default stylesheet consisting of basic style rules which are applied to DOM Elements in a page. If you've ever had a difficult time removing white-space between two elements, for example, it may have been because of the user agent stylesheet adding a default margin or padding to that particular type of element.
大意就是，user agent stylesheet 有时会给某些元素加上一个默认的 margin 和 padding，从而导致样式出问题。
早期的 Chrome（43.0 之前） 可以通过如下步骤关闭 user agent stylesheet：
- Open Chrome dev tools
- Click gear icon on bottom right
- In General section, check or uncheck "Show user agent styles"
现在最好的办法就是通过 css reset 来将 user agent stylesheet 里设置的默认 margin 和 padding 重置为 0。
不过需要注意的是，不止 Chrome 有这玩意，IE、Firefox、Webkit 内核的浏览器都有。
参考资料：
