[CSS] 컨텐츠 영역을 결정 짓는 블록과 인라인의 차이

1. 블록(block)과 인라인(inline)요소의 차이점

기본적으로 태그들은 블록 요소이거나, 인라인 요소입니다.

블록 요소는 앞에서 말씀 드렸다시피 컨텐츠 마다 패딩과 마진을 가지고 있고 해당 컨텐츠가 차지하는 줄 전체를 차지하는 요소이며, 인라인 요소는 그와는 반대 되는, 패딩과 마진 뿐만 아니라 보더도 없을 뿐만 아니라 해당 줄을 차지하지 않고 딱 컨텐츠 만큼을 차지하며 다수가 나란히 배치되는 요소입니다.

2. 블록과 인라인을 한 번에, 인라인 블록(inline_block)

Display의 속성 중에는 위에서 살펴본 inline과 block 값을 합쳐놓은 inline-block 값이 존재하는데, 이것은 해당 요소를 inline 특징처럼 아이템을 나열 하면서 동시에 block에서 줄 수 있는마진 값과 패딩 값, 가로 및 세로 값을 줄 수 있는 특징을 합쳐 놓은 값이라고 할 수 있겠습니다.