그럼 <span> 태그와 마찬가지로 display 속성을 사용하여 <h1> 태그의 혈액형을 Inline 요소로 변경해 볼까요?

h1 {
    display: inline;
    width: 300px;
    height: 300px;
    background-color: yellow;
    margin-bottom: 100px;
}

그림 8-4 <h1> 태그의 혈액형이 Inline 요소로 바뀜

그림 8-4의 결과를 보면 줄 바꿈 현상이 일어나지 않고 width, height, margin-bottom 속성도 적용되지 않은 것을 알 수 있습니다.

Inline 요소와 Block 요소가 섞여 있는 상태, 즉 줄 바꿈 현상은 일어나지 않지만 width, height, margin-bottom 속성은 적용되도록 하려면 어떻게 해야 할까요?