Box Model

요소의 실제 크기는 네 겹의 상자로 결정된다

content, padding, border, margin을 나눠 보면 크기 계산과 간격 문제가 훨씬 선명해진다.

크기 계산

레이아웃 기초

content

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

padding / border

내용과 경계 사이의 여백, 그리고 시각적 경계선을 만든다.

margin

다른 요소와의 거리를 만들며 배경색에는 포함되지 않는다.

contentpaddingbordermargin
읽는 법

border-box는 width 안에 padding과 border를 포함해 레이아웃 예측을 쉽게 만든다.