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> 요소는 줄 바꿈을 유발합니다. div30에 대해 display:inline-block;을 CSS에 넣으면이 문제를 피할 수 있습니다.

Answer 2

display: inline을 div에 추가하여 문제를 해결할 수 있습니다.

참조 : http://tinkerbin.com/HDmlrG6u