CSS / 박스 모델(Box Model)

CSS 박스 모델(Box Model)은 요소의 크기와 간격을 내용, 안쪽 여백, 테두리, 바깥 여백의 네 영역으로 설명하는 방식입니다. width가 어느 영역의 너비를 뜻하는지는 box-sizing에 따라 달라집니다. 따라서 width: 240px이라고 작성해도 기본 content-box에서는 패딩과 테두리를 더한 실제 상자가 240px보다 넓어질 수 있습니다.

박스를 구성하는 네 영역

글자와 이미지가 들어가는 내용 영역(content area)을 안쪽 여백(padding)이 둘러싸고, 그 바깥에 테두리(border)가 놓입니다. 바깥 여백(margin)은 테두리 밖에서 다른 상자와 간격을 만드는 영역입니다. 이 구조를 알면 배경색이 칠해지는 위치, 테두리의 크기, 옆 요소와의 간격을 따로 조절할 수 있습니다.

배경은 기본적으로 테두리 영역까지 그려지고 테두리 뒤로도 이어집니다. 실제로 보이는 범위는 테두리의 불투명도와 background-clip 등의 설정에 따라 달라집니다. 반면 margin은 배경을 칠하는 영역이 아닙니다. padding과 margin을 선택하는 구체적인 기준은 안쪽 여백과 바깥 여백 설명에서도 확인할 수 있습니다.

content-box와 border-box의 크기 계산

box-sizing: content-box에서는 지정한 width가 내용 영역의 너비입니다. 좌우 padding과 border는 그 바깥으로 더해집니다. 다음 조건이라면 테두리까지의 너비는 296px입니다.

.box {
  box-sizing: content-box;
  width: 240px;
  padding: 20px;
  border: 8px solid #536d88;
}

테두리까지의 너비 = 240 + (20 × 2) + (8 × 2) = 296px

box-sizing: border-box로 바꾸면 같은 240px 안에 내용, 좌우 padding과 border가 들어갑니다. 이 조건에서 내용 영역은 240 - 40 - 16 = 184px로 줄어들지만, 테두리까지의 너비는 240px을 유지합니다. margin은 두 방식 모두 지정한 width에 포함되지 않습니다.

일반적인 블록 요소의 초기값은 content-box이지만, 브라우저의 기본 스타일로 일부 폼 요소 등에 border-box가 적용될 수 있습니다. 모든 요소의 크기 계산 기준이 같을 것이라고 가정하지 말고 적용된 스타일을 확인하세요. 두 값의 정의는 MDN의 box-sizing 문서에 정리되어 있습니다.

전체 예제: 같은 width를 지정한 두 상자 비교

다음 코드를 box-model.html로 저장해 브라우저에서 엽니다. 위 상자는 content-box, 아래 상자는 border-box입니다. 다른 값은 같게 두고 box-sizing만 다르게 지정했습니다. 별도 이미지나 라이브러리는 필요하지 않습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>박스 모델 크기 비교</title>
  <style>
    body {
      margin: 0;
      color: #243449;
      background: #eef2f6;
      font-family: "Noto Sans KR", sans-serif;
      line-height: 1.5;
    }
    main { max-width: 640px; margin: 24px auto; padding: 0 16px; }
    h1 { font-size: 26px; }
    .stage {
      display: flow-root;
      border: 1px dashed #8498ad;
      background: #dfe7ef;
    }
    .box {
      width: 240px;
      margin: 16px;
      padding: 20px;
      border: 8px solid #536d88;
      background: #fff4d9;
    }
    .content-box { box-sizing: content-box; }
    .border-box { box-sizing: border-box; }
  </style>
</head>
<body>
  <main>
    <h1>박스 크기 비교</h1>
    <p>두 상자의 width는 모두 240px입니다.</p>
    <div class="stage">
      <div class="box content-box">content-box</div>
      <div class="box border-box">border-box</div>
    </div>
    <p>개발자 도구에서 내용, padding, border, margin을 확인해 보세요.</p>
  </main>
</body>
</html>

위 상자의 테두리까지 너비는 296px, 아래 상자는 240px입니다. 테두리 바깥의 회청색 공간은 부모의 배경이 보이는 부분입니다. 두 상자에서 padding: 20px만 30px로 바꾸면 위 상자는 316px로 넓어지고, 아래 상자는 240px을 유지하면서 내용 영역이 164px로 줄어듭니다. 비교를 마치면 padding을 20px로 되돌리세요.

개발자 도구로 실제 크기 확인하기

1. 브라우저에서 상자를 마우스 오른쪽 버튼으로 누르고 요소 검사 기능을 엽니다. 브라우저에 따라 메뉴 이름은 조금 다를 수 있습니다.
2. 요소 패널에서 첫 번째 div.box를 선택하고 계산된 스타일 또는 박스 모델 표시를 찾습니다. 내용 너비 240px, 좌우 padding 20px, 테두리 8px을 확인합니다.
3. 두 번째 상자를 선택해 내용 너비가 184px이고, 테두리까지의 전체 너비는 240px인지 비교합니다.
4. padding을 30px로 바꾼 뒤 같은 항목을 다시 확인합니다. 개발자 도구에서만 바꿨다면 새로 고침으로 저장된 원본 상태로 되돌릴 수 있습니다.

박스 모델 표시의 숫자를 읽을 때는 테두리까지의 상자 크기와 바깥 여백을 구분하세요. 또한 변형을 주는 transform이나 브라우저 확대가 적용된 화면에서는 보이는 크기와 CSS의 기본 배치 크기를 구분해 확인해야 합니다. 위 예제에는 transform을 사용하지 않았습니다.

여백과 크기에서 자주 혼동하는 점

세로 margin이 항상 더해지는 것은 아닙니다. 일반 블록 흐름에서 위아래로 인접한 양의 margin은 조건에 따라 더 큰 값 하나로 병합됩니다. 이 예제의 두 상자는 위아래 margin이 각각 16px이지만, 사이 간격은 32px이 아니라 16px입니다. Grid나 Flex 항목 사이에서는 같은 방식의 margin 병합이 일어나지 않습니다. 자세한 조건은 MDN의 margin 병합 설명을 참고하세요.

border-box가 콘텐츠 넘침까지 해결하지는 않습니다. 긴 단어, 큰 이미지나 지나치게 큰 padding과 border가 있으면 별도의 줄바꿈·크기 제한이 필요합니다. padding과 border의 합보다 width를 작게 지정하면 내용 영역은 음수가 될 수 없으므로 테두리 상자가 지정한 너비보다 커질 수도 있습니다. 배치가 어긋났을 때는 width만 줄이지 말고 어느 영역이 공간을 사용하는지부터 확인하세요.

HTML 요소 하나가 항상 화면의 박스 하나와 대응하지는 않습니다. 예를 들어 줄바꿈된 인라인 요소는 여러 줄에 나뉘어 그려질 수 있고, display: none인 요소는 배치용 상자를 만들지 않습니다. 이 글의 너비 계산 실습은 일반적인 블록 상자를 대상으로 합니다. CSS 박스 모델 소개에서 네 영역의 정의를 확인할 수 있습니다.