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;來避免這種情況display:inline-block; 在div的CSS中。

Answer 2

您可以將display: inline添加到div中以解決此問題。

請參閱： http ： //tinkerbin.com/HDmlrG6u