为什么我的内部div显示：block在父级内部按下显示：内联？

Question

我有以下HTML + CSS

<div>
    <div class="first">text</div>
    <div>more text</div>
</div>

div {
    display: inline;
}
.first {
    display: block;
}

有些令人惊讶的结果是，在first项目之前，我得到一个空行（无论如何都在Chrome和Firefox中）。

我很感激有人向我解释为什么如果inline家长中的第一个div有display: block;

，会发生这种情况

这是一个证明问题的方法 http://jsfiddle.net/kkozmic/fsm9D/1/

Answer 1

据我所知，你不应该在内联元素中嵌入块元素。块元素使用整个宽度，而内联元素则不使用 - 它们只使用宽度足以在其中显示文本

http://www.w3.org/TR/REC-html40/struct/global.html#block-inline

编辑：这是一个很好的解释http://skypoetsworld.blogspot.in/2008/10/dont-ever-put-block-inside-inline.html

Answer 2

好的第一项包含display：block;根据定义，块元素是占用可用全宽度的元素，并且在它之前和之后有一个换行符。

这就是为什么你在第一个元素

之前得到一个空行