将 div 的 display 属性设置为 inline 产生的问题.

Question

代码:

<div id="logo">
    <img src="images/logo.jpg">
</div>

默认, div 元素的 display 属性为 block. 所以默认结果显示如下图:

上图中, 红色边框是 div 元素的边框.

如果将 div 元素的 display 属性改为 inline-block, 那么显示结果如下图:

上图中, 红色边框是 body 元素的边框, 黑色边框是 div 元素的边框.

如果将 div 元素的 display 属性修改为 inline, 那么显示结果如下图:

上图中红色边框是 div 的边框. 可是为什么会这样呢?

Answer 1

这个是inline block的坑，你可以在父元素上设置font-size:0。
具体请看：去除inline－block间距的N种方法