1

我有以下 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;

这是一个 jsfiddle 演示问题 http://jsfiddle.net/kkozmic/fsm9D/1/

4

2 回答 2

4

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

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

于 2013-06-02T02:26:19.670 回答
0

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

这就是为什么你在第一个元素之前得到一个空行

于 2013-06-02T02:42:14.337 回答