html - Why is my inner div with display:block pushed down inside a parent with display:inline?

Question

I have the following HTML+CSS

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

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

The, somewhat surprising, result of that, is that before the first item, I'm getting an empty line (in Chrome and Firefox anyway).

I'd appreciate someone explaining to me why that happens if the first div inside an inline parent has display: block;

here's a jsfiddle demonstrating the problem http://jsfiddle.net/kkozmic/fsm9D/1/

score 4 · Accepted Answer

私の知る限り、インライン要素内にブロック要素を埋め込まないでください。ブロック要素は幅全体を使用しますが、インライン要素はそうではありません - それらは内部にテキストを表示するのに十分な幅を使用するだけです

score 0 · Accepted Answer

最初の項目には display: block; が含まれています。定義によれば、ブロック要素は利用可能な全幅を占める要素であり、その前後に改行があります。

そのため、最初の要素の前に空の行が表示されます

2 に答える 2