박스 모델 계산 기준

요소의 실제 크기는 네 영역을 함께 봅니다

콘텐츠, 패딩, 테두리, 마진의 역할을 분리하면 폭이 넘치는 이유를 빠르게 찾을 수 있습니다.

바깥에서 안쪽으로 읽기

margin: 다른 요소와의 거리

border: 요소의 경계선

padding: 내용과 경계 사이 여백

content: 글과 이미지가 놓이는 공간

width / height

기본 계산에서는 콘텐츠 크기만 뜻합니다. 패딩과 테두리를 더하면 실제 차지 폭이 커집니다.

box-sizing

레이아웃에는 border-box가 안전합니다. 지정한 폭 안에 패딩과 테두리가 함께 들어갑니다.

padding

버튼, 카드, 입력창처럼 내용이 테두리에 붙지 않게 할 때 사용합니다.

margin

요소 사이의 거리입니다. 세로 마진은 겹쳐 보일 수 있어 섹션 간격은 한쪽으로 통일합니다.

요소의 실제 크기 실수 방지

가로폭 100% 요소에 패딩을 더했는데 화면이 밀리면 먼저 box-sizing 값을 확인하세요.