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

你可以添加display: inline到你的 div 来解决这个问题。

见：http ://tinkerbin.com/HDmlrG6u