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