h1之前的空行

Question

我认为这是一个非常简单的CSS问题，但我不知道如何解决它。

为什么在＆lt; h1＆gt;之前有一个空行，以及如何删除它（如果可能，不设置边距和行高）？谢谢！

<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

休息是因为你正在使用块元素。一个空的＆lt; div＆gt;否则元素将导致换行。您可以通过将display:inline-block;放入div的CSS中来避免这种情况。

Answer 2

您可以将display: inline添加到您的div来解决此问题。

请参阅：http://tinkerbin.com/HDmlrG6u