An empty line before h1

Question

I think it's a really simple CSS problem, but I just don't know how to solve it.

Why is there an empty line before <h1>, and how to remove it (without setting margin and line-height if possible)? Thank you!

<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>

Edit:

Result: http://tinkerbin.com/u6eB0PFQ

Answer 1

The break is there because you are using block elements. An empty <div> element will otherwise cause a line break. You can avoid this by putting display:inline-block; in the CSS for the divs.

Answer 2

You can add display: inline to your div to solve this.

See: http://tinkerbin.com/HDmlrG6u