box model decision

요소 크기는 안쪽 네 겹과 바깥 배치 방식으로 결정된다

박스 모델을 볼 때는 콘텐츠, 패딩, 테두리, 마진을 따로 보되 `box-sizing`과 `display`가 계산 기준을 바꾼다는 점을 함께 확인합니다.

layer order

content

텍스트와 이미지가 들어가는 실제 내용 영역입니다.

padding

내용과 테두리 사이 여백이며 배경색의 영향을 받습니다.

border

패딩 바깥의 경계선이고 실제 크기 계산에 포함될 수 있습니다.

margin

요소 바깥 간격이며 배경색이 칠해지지 않는 영역입니다.

계산 기준 확인

`width`가 콘텐츠만 의미하는지, 테두리까지 포함하는지 봅니다.

box-sizing

클릭 영역과 배경색이 필요한 공간은 padding으로 잡습니다.

padding

다른 요소와의 거리는 margin이나 부모의 gap으로 조절합니다.

margin / gap

줄 전체를 차지할지, 텍스트 흐름 안에 놓을지 display로 정합니다.

display

content-box

`width + padding + border`가 실제 화면 너비가 됩니다.

border-box

`width` 안에 content, padding, border가 함께 들어갑니다.