박스 모델

상자에 width: 200px, 안쪽 여백 16px, 테두리 2px를 주면 기본 설정에서는 화면에서 200이 아니라 236픽셀을 차지합니다.

모든 요소는 상자입니다

페이지를 배치하려고 브라우저는 모든 요소를 사각형으로 만듭니다. 상자마다 안에서부터 바깥으로 네 개의 층이 있습니다. 내용 영역에는 글자나 그림이 들어갑니다. 안쪽 여백(padding)은 내용과 테두리 사이의 상자 안쪽 공간이고, 상자의 배경색이 칠해집니다. 테두리(border)는 안쪽 여백을 둘러싼 선입니다. 바깥 여백(margin)은 테두리 바깥의 공간으로 다른 상자를 밀어내며, 항상 투명합니다. 브라우저 개발자 도구로 요소를 검사하면 바로 이 그림에 숫자를 채워 보여 줍니다.

네 변을 한 번에 쓰기

padding, margin, border-width에는 값을 한 개에서 네 개까지 쓸 수 있고, 위에서부터 시계 방향으로 적용됩니다. padding: 16px는 네 변 모두, padding: 8px 16px는 위아래 8, 좌우 16입니다. padding: 4px 8px 12px 16px는 위, 오른쪽, 아래, 왼쪽 순서입니다. margin-top처럼 한 변만 따로 정할 수도 있습니다. border: 2px solid #333은 두께, 모양, 색을 한 번에 정하는데, solid나 dashed 같은 모양이 없으면 테두리가 아예 그려지지 않습니다.

box-sizing: 거의 모두가 바꾸는 설정

기본으로 width와 height는 내용 영역의 크기만 정하고, 안쪽 여백과 테두리는 그 위에 더해집니다. 이것이 content-box 모델이고, 배치를 불편하게 만듭니다. width: 50%인 상자 두 개에 안쪽 여백이 조금만 있어도 나란히 들어가지 않습니다. box-sizing: border-box를 주면 width에 안쪽 여백과 테두리가 포함되고, 그만큼 내용 영역이 줄어듭니다. 많은 스타일시트가 *, *::before, *::after { box-sizing: border-box; }로 모든 요소에 이 설정을 주며 시작합니다.

블록 상자와 인라인 상자

상자는 display 값에 따라 다르게 움직입니다. p, h1, section 같은 블록 상자는 새 줄에서 시작해 부모의 너비를 꽉 채웁니다. a, strong, span 같은 인라인 상자는 글줄 안에 자리 잡습니다. 이들에는 width와 height가 적용되지 않고, 위아래 여백도 다른 줄을 밀어내지 않습니다. display: inline-block은 그 중간입니다. 낱말처럼 줄 안에 놓이면서도 너비, 높이, 안쪽 여백을 지켜서 작은 이름표나 버튼에 어울립니다.

합쳐지는 바깥 여백

거의 모두가 놀라는 규칙이 하나 있습니다. 한 블록의 아래 바깥 여백과 다음 블록의 위 바깥 여백이 만나면 더해지지 않고 큰 쪽만 남습니다. margin-bottom: 20px인 문단 다음에 margin-top: 30px인 제목이 오면 간격은 50이 아니라 30픽셀입니다. 이를 바깥 여백 상쇄(margin collapsing)라고 하며, 보통 흐름 속 블록 사이의 세로 여백에서만 일어나고 플렉스나 그리드 안에서는 일어나지 않습니다. 블록을 가로 가운데에 놓으려면 width나 max-width를 주고 margin: 0 auto를 씁니다. 자동으로 정해지는 양쪽 여백이 남는 공간을 똑같이 나눕니다.