너비 100%를 지정했는데 화면 밖으로 넘칠 때: box-sizing 속성 확인법

SmartInfoBank 운영자 · 작성 2026-10-27 · 수정 2026-10-27 · 6분

웹 페이지를 제작하다 보면 부모 영역 꽉 차게 요소를 배치하기 위해 width: 100%를 지정했는데, 요소가 부모 영역을 삐져나가거나 브라우저 하단에 불필요한 가로 스크롤이 생기는 문제를 자주 겪습니다. 요소 내부에 여백(padding)을 주거나 테두리 선(border)을 추가하는 순간 이러한 현상이 두드러집니다.

이는 CSS 박스 모델의 기본 계산 방식인 content-box 때문입니다. 브라우저가 화면상 렌더링 너비를 계산하는 방식과 이를 방지하는 box-sizing: border-box 속성의 적용 순서를 정리합니다.

너비 초과가 일어나는 재현 조건

너비 초과 현상은 부모 컨테이너의 너비가 고정되어 있거나 특정 비율로 제한된 상태에서, 자식 요소에 width: 100%와 함께 좌우 padding 또는 border를 동시에 지정했을 때 발생합니다.

/* 재현용 CSS */
.parent {
  width: 200px;
  background-color: #eee;
}

.child {
  width: 100%;
  padding: 20px;
  background-color: #ccc;
}

위와 같이 작성하면 화면상에서 자식 요소는 200px에 머물지 않고 부모 박스 오른쪽으로 40px 더 튀어나오게 됩니다.

content-box와 border-box의 계산 방식 차이

MDN box-sizing 문서에 따르면 CSS에서 box-sizing의 초기 기본값은 content-box입니다. 이 모드에서는 개발자가 지정한 width와 height가 오직 순수 내용(content) 영역의 크기만을 결정합니다. 따라서 테두리(border)나 안쪽 여백(padding)은 지정한 너비에 계속 덧셈 방식으로 합산됩니다.

반면 border-box 값을 지정하면 브라우저는 요소의 너비(width) 안에 내용뿐 아니라 좌우 padding과 좌우 border를 모두 포함하여 계산합니다. 안쪽 여백이나 테두리가 늘어나면 순수 내용 영역이 그만큼 줄어들면서 전체 너비는 정확히 지정한 값으로 고정됩니다.

검증된 계산 예시

실제 렌더링 시 브라우저가 수치를 계산하는 정확한 결과를 확인해 보겠습니다.

너비 200px 컨테이너 내부 자식 요소에 width: 100%와 padding: 20px를 주면 기본 box-sizing: content-box 상태에서는 실제 너비가 240px(200px + 좌우 40px)가 되어 40px만큼 부모 밖으로 넘칩니다. 해당 요소에 box-sizing: border-box 속성을 적용하면 패딩이 200px 내부에 포함되어 최종 너비가 정확히 200px로 유지됩니다.

content-box 상태에서는 부모 크기 200px의 100%인 200px에 좌우 패딩 20px씩(총 40px)이 더해져 실제 렌더링 너비가 240px가 됩니다. 이로 인해 부모 밖으로 40px 초과 돌출이 일어납니다. 반면 box-sizing: border-box를 선언하면 전체 너비가 200px로 묶이며 내용 영역 너비가 160px로 줄어듭니다.

단계별 해결 순서

가로 스크롤이나 돌출 문제가 발생했을 때 안전하게 수정하는 순서는 다음과 같습니다.

1. 개발자 도구(F12) 검사: 브라우저 개발자 도구의 요소(Elements) 탭에서 문제가 된 요소를 선택하고, 계산됨(Computed) 탭의 박스 모델 다이어그램을 확인합니다.
2. 현재 box-sizing 확인: 스타일에 box-sizing이 명시되어 있지 않다면 기본값인 content-box로 동작하고 있는지 확인합니다.
3. border-box 속성 적용: 해당 요소 또는 상위 공통 스타일에 box-sizing: border-box;를 추가합니다.
4. 최종 너비 재검증: 계산됨 탭에서 전체 렌더링 너비가 부모 컨테이너의 가용 너비(200px)와 일치하는지 확인합니다.

적용 시 주의사항과 예외적 한계

box-sizing: border-box가 모든 배치 문제를 해결하는 것은 아닙니다. 다음과 같은 구조적 한계와 예외를 고려해야 합니다.

• margin은 제외됨: border-box는 padding과 border까지만 포함합니다. 바깥 여백인 margin은 여전히 너비 바깥에 추가되므로, width: 100% 요소에 좌우 margin을 주면 여전히 가로 넘침이 발생합니다.
• 내용 영역의 최솟값: 내용 영역은 음수가 될 수 없으며 0 이하로 축소되지 않습니다. 만약 너비 200px 상자에 좌우 패딩을 합쳐 250px를 주면, border-box라도 상자 자체가 늘어날 수밖에 없습니다.
• 일부 기본 폼 요소: MDN 명세에 기재된 바와 같이 table, select, button, 일부 input(체크박스, 라디오 등) 요소는 브라우저 기본 스타일로 이미 border-box가 적용되어 있는 경우가 많습니다. 일반 div나 p, textarea 등과 동작이 다를 수 있음을 인지해야 합니다.

웹 화면에서 텍스트 줄바꿈이 길어져 상자가 넘치는 현상은 pre 태그와 CSS white-space 속성을 함께 살펴보면 더욱 명확하게 분리하여 진단할 수 있습니다.