html - 为什么内联 block 渲染略低于比较 block ？

Question

将内部 div 设置为 inline-block 时，它呈现的效果略低于 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 设置为 block ，看看有什么不同!

同样的内联 block 在这里添加了一个滚动条 http://jsbin.com/kabom/1/edit

就因为，下面的一个类被添加到一个div中!

.sapUiView {
display: inline-block;
}

Answer 1

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

尝试添加

 margin:0;

像这样给 p 的第一个 child :

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