display: block;을 추가하면 <span> 태그의 혈액형이 Inline 요소에서 Block 요소로 바뀝니다. 그림 8-2의 결과를 보면 먼저 줄 바꿈 현상이 나타나고 width, height, margin-bottom 속성이 적용된 것을 확인할 수 있습니다.

이번에는 Block 요소의 혈액형을 가진 <h1> 태그의 특징을 알아보겠습니다. <h1> 태그는 Block 요소의 특징이 있습니다. 따라서 줄 바꿈 현상이 일어나고 width, height, margin-bottom 속성이 적용됩니다.

예제 소스 Exercise/8장/1_display/index02.html

<h1>Block Elements -> Inline Elements</h1>
<h1>Block Elements -> Inline Elements</h1>