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