● 블록 vs 인라인 vs 인라인 블록

박스 모델의 3가지 성격은 박스 모델의 구성 요소와 관련한 속성을 적용할 때 조금씩 차이가 있습니다. 블록 성격이나 인라인 블록 성격은 width, height, margin, padding 속성이 전부 적용되지만, 인라인 성격은 width, height 속성은 적용되지 않고 padding과 margin 속성은 각각 왼쪽과 오른쪽 방향만 적용됩니다. 실제로 인라인 성격인 span 태그에 width 속성이나 height 속성을 지정하면 너비와 높이가 설정되지 않습니다. padding 속성과 margin 속성도 위쪽과 아래쪽은 적용되지 않습니다.

● display 속성

HTML 태그가 기본으로 가지고 있는 박스 모델의 성격은 display 속성을 사용하면 변경할 수 있습니다. 속성값으로는 block, inline, inline-block을 사용합니다. 예를 들어, 블록 성격인 태그를 인라인 성격으로 바꾸고 싶다면 display 속성값을 inline으로 지정하면 됩니다.

h1, h2{
  display:inline;
}

반대로 인라인 성격인 태그를 블록 성격이나 인라인 블록 성격으로 바꾸고 싶다면 display 속성값을 block 또는 inline-block으로 지정하면 됩니다.

a{
  display:inline-block;
}
img{
  display:block;
}