콘텐츠 영역
텍스트와 이미지가 실제로 들어가는 중심 영역입니다.
박스 모델과 표시 방식 계산
모든 요소는 콘텐츠, 패딩, 테두리, 마진으로 계산되는 상자이며 display 값에 따라 줄 흐름과 크기 계산이 달라집니다.
Padding
콘텐츠와 테두리 사이의 안쪽 여백을 만듭니다.
Border
상자의 경계를 시각적으로 표시하고 크기에 포함될 수 있습니다.
Margin
다른 요소와의 바깥 간격을 조정합니다.
border-box는 width 안에 padding과 border를 포함해 계산을 단순하게 합니다.
줄 전체를 차지하고 width, height, margin 조정이 자연스럽습니다.
문장 흐름 안에 놓이며 너비와 높이 제어가 제한적입니다.
문장 흐름을 유지하면서 박스 크기 제어가 필요할 때 씁니다.
디버깅 순서
크기가 이상하면 content-box 여부, padding, border, margin을 분리해 봅니다.
박스 모델과 표시 실수 방지
마진 상쇄 때문에 부모와 첫 자식 간격이 예상과 다르게 보일 수 있습니다.
박스 모델과 표시 방식 계산
같은 width라도 box-sizing에 따라 실제 차지 폭이 달라지는 이유를 설명합니다.