블록 / 인라인 레벨 요소

block

• 상위 태그의 width 전체를 차지하여 block을 생성
• 이전/이후 태그 사이에 줄바꿈 생성
• 페이지의 구조적 요소를 나타낼 때 사용
• 블록 요소는 인라인 요소 안에 중첩될 수 없지만 인라인 요소는 블록 요소 안에 중첩 가능
• width 및 height를 통해 크기를 지정할 수 있으며 margin, padding, border 속성 사용 가능
• div, p, li, na, footer 태그 등이 있다.

<!-- 블록 요소 안의 인라인 요소 (가능) -->
<div>
  블록 요소
  <span>인라인 요소 중첩 가능</span>
</div>

<!-- 인라인 요소 안의 블록 요소 (불가능) -->
<span>
  인라인 요소
  <div>블록 요소 중첩 불가능</div>
</span>

inline

• 항상 블록 요소 내에 포함
• 컨텐츠의 width 전체를 차지하지 않고 컨텐츠의 크기에 따라 할당된 공간만 차지한
• 새로운 줄바꿈을 생성하지 않는다.
• width, height를 통해 크기를 지정할 수 없으며 margin, padding, border 속성을 사용할 수 있지만 상하 margin 속성은 사용 불가능하다.
• span, a, em, strong 태그 등이 있다.