html - h1 の前の空行

Question

これは本当に単純な CSS の問題だと思いますが、解決方法がわかりません。

<h1> の前に空の行があるのはなぜですか? また、それを削除する方法 (可能な場合、マージンと行の高さを設定せずに) は? ありがとうございました！

<style>
.box-green { background-color: #CCC; }
.box-empty { height: 50px; }
</style>

<div class="box-empty box-green"></div>
<div class="box-green">
    <h1>There is an empty line before h1, why?</h1>
</div>

編集：

結果: http://tinkerbin.com/u6eB0PFQ

Answer 1

ブロック要素を使用しているため、ブレークがあります。それ以外の場合、空の <div> 要素は改行を引き起こします。display:inline-block;これは、div の CSS を挿入することで回避できます。

Answer 2

これを解決するには、div に追加display: inlineします。

参照: http://tinkerbin.com/HDmlrG6u