인라인 블럭 레벨 엘레멘트의 특징

 

 인라인 블럭 레벨 엘레멘트는 엘레멘트 영역은 블럭레벨 엘레멘트처럼 지정한 너비와 높이를 모두 가질 수 있지만, 다른 엘레멘트와는 줄바꿈을 하지 않는 성질을 가지고 있다. 즉, 영역은 블럭레벨처럼 영역을 가지고, 다른 엘레멘트와는 줄바꿈을 하지 않는 엘레멘트를 말한다.

 

<div style="display:inline-block">블럭 레벨에 인라인블럭 레벨 적용1</div>
<div style="display:inline-block">블럭 레벨에 인라인블럭 레벨 적용2</div>
<span style="display:inline-block">인라인 레벨에 인라인블럭 레벨 적용1</span>
<span style="display:inline-block">인라인 레벨에 인라인블럭 레벨 적용2</span>

 

 위와 같이 div 태그는 블럭 레벨 요소이다. 그럼 위에 div 태그와 아래의 div 태그는 줄 바꿈이 일어나야 하지만 실제로는 줄 바꿈이 일어나지 않는다. 이유는 div 태그에 인라인 블럭 레벨를 적용했기 때문이다.