为什么 inline-block 呈现略低于比较块？答案

【问题标题】：why inline-block renderes slightly below complared block?为什么 inline-block 呈现略低于比较块？
【发布时间】：2014-04-18 18:21:59
【问题描述】：

在将内部 div 设置为 inline-block 时，它会呈现略低于块的渲染。这是为什么呢？

http://jsfiddle.net/Sb9Wb/

<div class="outer">
<div class="inner">
    <p> This is a inner div</p>
    <p>Height set to 100%</p>
    <p>Why it renderes slightly below when set to inline-block that of a block?</p>
</div>

请尝试将内部 div 设置为块，看看有什么不同！

同样的inline-block在这里添加了滚动条http://jsbin.com/kabom/1/edit

仅仅因为，下面的一个类被添加到了一个div中！

.sapUiView {
display: inline-block;
}

【问题讨论】：

你能张贴一张小图来显示这个转变在哪里吗？
区别在这里：stackoverflow.com/questions/8969381/…
jsfiddle.net/Sb9Wb 你是这个意思？？？

标签： html css css-selectors

【解决方案1】：

您实际看到的空间是由添加 inline-block 属性时可见的“p”边距引起的。

尝试添加

 margin:0;

到 p 的第一个孩子，像这样：

http://jsfiddle.net/Sb9Wb/2/

【讨论】：

“变得可见”可能更好地描述为“没有按照正常规则压缩”，因为inline-block 定义了一个新的边距上下文。
谢谢安德鲁！但是你能检查一下为什么它在jsbin.com/kabom/1/edit 出于同样的原因添加了一个滚动条！