为什么父容器不设高度却比子容器总高还高

Question

1 html 结构

<div>
    <img/>
</div>

2 div节点

3 img节点

4 css

div{
    padding:0
} 
img{
    width:100%
}

5 疑问

如何消除下面的白条? div节点没有写高度,为什么div会比图片的总高还高?

Answer 1

因为img的问题，图片本身算是个奇葩的元素。图片本身是行内块级元素，它外部嵌套一个块级元素时，图片标签img的周围会产生一个不存在于DOM但是实际能看得见的空隙（产生的原因比较玄学），参见这个https://stackoverflow.com/que...。
更有趣的是，这个空隙既不属于img元素的一部分，也不属于父元素的一部分。所以父元素虽然被撑开了，但是下面那一块空隙并不属于img。
解决方案有几种，我常用的是将img设为块级元素display: block或者，用float清除其行内特性。

Answer 2

反对 @boxsnake 的答案，程序的问题哪里有玄学？还真把面向玄学编程当作一门学科来研究了？

这个问题产生的原因我在很早之前在 sf 上提问过，答案供你参考
http://segmentfault.com/q/101...

Answer 3

试试

div{
    padding:0
} 
img{
    margin:0;
    height:100%
    width:100%
}

Answer 4

这是有原因的。
inline 元素会有一个错位，是因为浏览器把它作为一行字来看。
众所周知，英文 a c e 等字母写在格子中间，而 b d p f 等字母则要么往上要么往下突出了一段。
而 inline 元素留下的那一小空白，就是给这些字母留下的。
因此解决办法也很简单，负边距消除，或者改变 display 设定都可以。