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

问题描述：

1 html 结构

<div>
    <img/>
</div>

2 div节点

3 img节点

4 css

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

5 疑问

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

第 1 个答案：

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

第 2 个答案：

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

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

第 3 个答案：

试试

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

第 4 个答案：

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

使用webpack打包工具，将图片资源文件打包完之后发现一个问题。在打包文件bundle.js中我的图片引用的是相对路径。而我上线的项目入口html和资源文件是分开的。请问有什么方法在生产环境中打包的时候直接 ...