인라인 요소 vs. 블록 요소

인라인(inline) 요소

인라인 요소는 콘텐츠 자신의 크기만큼 영역을 가지는 요소를 말한다.

이 특징으로 인해 width와 height 값이 적용되지 않는다.
(위 경우 display: inline-block을 적용해야 width와 height가 적용된다)

일반적으로 인라인 요소만 중첩이 가능하고 인라인 요소의 정렬은 텍스트 정렬에 영향을 받는다. 대표적인 인라인 요소로는 a, span, label, strong, b, cite 등이 있다.

블록(block) 요소

블록 요소는 한 개의 독립된 덩어리로 화면의 가로 폭 전체를 차지하는 요소를 말한다. 일반적으로 블록 요소를 사용하면 라인이 바뀐다. 블록 요소는 블록 요소와 인라인 요소를 모두 포함할 수 있다.
대표적으로 p, table, heading, article, header, nav, section, div, list, blockquote 등이 있다.

인라인-블록(inline-block) 요소

인라인 요소와 달리 너비와 높이를 설정할 수 있고, 블록 요소와 달리 줄바꿈이 되지 않아 다른 요소 옆에 위치시킬 수 있다.
대표적으로 button, img, input, select, textarea가 있다.

Example