13. box-sizing: border-box

박은서

Jan 08, 2026

Contents

1. box-sizing 1️⃣ 기본 개념 2️⃣ box-sizing: border-box 3️⃣ 정리 4️⃣ 실습

1. `box-sizing`

1️⃣ 기본 개념

HTML 요소의 크기(width, height)는 박스 모델(Box Model) 로 계산됨

기본값은 content-box

1) `content-box` (기본값)


box-sizing: content-box;   /* 기본 */

width/height는 content(내용) 영역만 의미

padding과 border가 추가로 늘어남

2) 예시


width:100px;
padding:20px;
border:10px;

➡️ 실제 요소 크기 : width(100) + padding(40) + border(20) = 실제 크기 160px

2️⃣ `box-sizing: border-box`

1) 개념


box-sizing: border-box;

width/height에 content + padding + border가 모두 포함됨

요소의 총 크기가 지정한 값 그대로

2) 예시


width:100px;
padding:20px;
border:10px;

→ 실제 요소 크기 딱 100px = width(40) + padding(40) + border(20)

즉,

padding 늘려도 전체 너비가 변하지 않음

레이아웃 깨짐 방지 👍

3) 필요성

레이아웃 계산이 쉽고 일관적

특히 반응형(responsive) 디자인에 유리

CSS reset에서 거의 기본으로 넣음

예시)


* {
	box-sizing: border-box;
}

3️⃣ 정리

속성	의미
`content-box`	width는 내용만. padding/border는 크기 증가
`border-box`	width 안에 padding+border 포함. 총 크기 일정

4️⃣ 실습


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        box-sizing: border-box;
      }
      .box1 {
        display: inline-block;
        padding: 10px;
        width: 300px;
        height: 300px;
        border: 20px solid green;
      }
      .box2 {
        display: inline-block;
        width: 300px;
        height: 300px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <h1>box-sizing</h1>
    <hr />

    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</html>