[MDN Study] CSS 박스 모델 - block, inline

1. 개요

브라우저는 문서의 레이아웃을 계산할 때, 렌더링 엔진을 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현한다.

이 때 CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 등)을 결정한다.

하나의 박스는 네 영역으로 이루어진다. 박스 안쪽부터 순서대로

컨텐츠(content), 안쪽 여백(padding), 테두리(border), 바깥 여백(margin) 영역이다.

이곳에서는 CSS 박스 모델을 block, inline으로 나누고 비교한다.

3. block과 inline

CSS의 박스 모델은 크게 블록(block) 박스와 인라인(inline) 박스로 나눈다.

박스의 작동 방식에 따라 유형을 구분한다.

3.1. block

div, p, h1~h6, ul, li, section, article, header, footer, form, nav 등이 포함된다.

• 줄바꿈이 자동 적용되어 항상 새로운 줄에서 시작한다.

• 부모의 가로 너비를 가득 채운다. width: auto -> 부모 width 100%

• width, height, margin, padding 설정이 모두 적용된다.

• 내부에 block, inline 요소 모두 포함 가능하다.

• 레이아웃의 큰 구조를 설정하는 데 사용된다.

3.2. inline

span, a, em, strong, b, i, label, small, img 등이 포함된다.

• 줄 안에서 다른 텍스트·요소와 나란히 배치된다.

• 기본적으로 내용(컨텐츠)의 크기만큼만 차지한다.

• width, height는 무시되어 크기 직접 지정이 불가능하다.

• margin, padding은 좌우 크기만 적용된다. 위아래는 줄 간격(line-height)에 영향을 준다.

• 내부에 block 요소를 포함할 수 없다.

• 주로 텍스트 조각이나 작은 아이콘에 사용된다.

3.3. inline-block

• 바깥에서는 inline처럼 동작하고 안에서는 block처럼 동작한다.

3.4. block vs inline