너비와 box-sizing

width는 따로 정하지 않으면 상자의 내용 칸 너비입니다. 안쪽 여백과 테두리는 그 바깥에 더해져, 화면에서 차지하는 너비는 적은 값보다 커집니다. box-sizing: border-box⁠를 주면 적은 너비가 곧 차지하는 너비가 됩니다.

입력 칸에 width: 100%를 주었는데 폼 오른쪽으로 삐져나오거나, 300px로 적은 카드가 300px 칸에 들어가지 않는 일이 여기서 생깁니다. 이 레슨은 차지하는 너비를 손으로 셈하는 상자 셈과, 그 셈을 덜어 주는 border-box를 봅니다.

그림 준비 중

1width는 내용 칸만 잰다

상자 네 겹에서 세운 규칙에 문장을 잇습니다.

브라우저 규칙 6. width는 따로 정하지 않으면(box-sizing 처음 값) 내용 칸만 잽니다. 블록 상자는 너비를 적지 않으면 부모 내용 칸을 채우고, 높이는 내용만큼입니다.

<div class="box">김치볶음밥</div>

.box {
  width: 300px;
  padding: 20px;
  border: 2px solid #1d1d1f;
}

잰 값 두 줄이 다릅니다. width 줄은 Computed 창에 보이는 계산된 값, 곧 내용 칸 너비입니다. '너비' 줄은 테두리까지 화면에서 차지하는 너비입니다. 300에 왼쪽 · 오른쪽 안쪽 여백 20 × 2가 붙어 340, 테두리 2 × 2가 붙어 344입니다.

2상자 셈 — 차지하는 너비를 손으로 셈하기

차지하는 너비는 안에서 바깥으로 네 걸음에 셈합니다. 이 네 걸음을 상자 셈이라 부르겠습니다.

왼쪽 · 오른쪽 두 쪽이라 늘 '× 2'입니다. 바깥 여백은 상자 밖의 빈 자리라 넷째 걸음에서 따로 둡니다 — 옆 상자와 얼마나 떨어지는지 셈할 때만 씁니다.

3box-sizing: border-box — 적은 너비가 차지하는 너비

같은 상자에 box-sizing: border-box⁠를 더합니다.

<div class="box">김치볶음밥</div>

.box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 2px solid #1d1d1f;
}

이제 width 300이 테두리까지의 너비입니다. 셈이 거꾸로 되어, 300에서 테두리 4와 안쪽 여백 40을 뺀 256이 내용 칸입니다. 안쪽 여백을 늘려도 차지하는 너비는 300 그대로이고 내용 칸이 줄어듭니다. 그래서 많은 페이지가 CSS 맨 위에 모든 요소(*)를 border-box로 바꾸는 규칙을 둡니다. 이렇게 CSS 맨 위에서 모든 요소에 한꺼번에 주는 규칙을 리셋(reset)이라 부릅니다. 할 일 화면도 이 줄로 시작합니다.

* {
  box-sizing: border-box;
}

4너비를 적지 않은 블록은 부모를 채운다

<div class="a">가</div>
<div class="b">나</div>

.a {
  max-width: 600px;
}

.b {
  width: 600px;
}

창 폭이 400px이면 body 내용 칸은 바깥 여백 8 × 2를 뺀 384px입니다. max-width는 '이보다 넓어지지 않는다'는 상한이라, 창이 좁으면 부모 내용 칸 384px을 채웁니다. 고정 width: 600px은 창이 좁아도 600 그대로라 가로로 삐져나옵니다. 다음 레슨 가운데 모으기가 max-width를 씁니다.

예제

상자 셈으로 카드 너비 구하기

레시피 카드의 차지하는 너비를 네 걸음으로 셈합니다.

<article class="recipe-card">
  <h2>김치볶음밥</h2>
</article>

.recipe-card {
  width: 220px;
  padding: 16px;
  border: 1px solid #d2d2d7;
  margin: 12px;
}

네 걸음을 표에 적습니다.

손으로 셈한 254가 잰 값과 같습니다.

• 카드가 페이지에서 쓰는 가로 자리는 254에 바깥 여백 12 × 2를 더한 278이지만, 칠한 카드는 254입니다.
• 카드에 box-sizing: border-box⁠를 주면 1~3 걸음 없이 width 220이 곧 차지하는 너비입니다.

자주 틀리는 곳

틀린 생각: width가 상자가 차지하는 너비다 — width: 100%면 부모 폭에 꼭 맞는다.

<form>
  <input type="text" />
</form>

form {
  width: 300px;
}

input {
  width: 100%;
  padding: 12px;
  border: 1px solid #6e6e73;
}

입력 칸이 폼 오른쪽으로 26px 삐져나옵니다. 100%는 내용 칸이 폼의 내용 칸 300과 같다는 뜻이고, 그 바깥에 안쪽 여백 24와 테두리 2가 붙었습니다.

맞는 규칙: width는 처음 값에서 내용 칸 너비입니다. 칸을 부모 폭에 맞추려면 box-sizing: border-box⁠를 줍니다.

틀린 생각: 리셋 규칙은 덩어리째 복사해 두면 된다.

<ul>
  <li>밥 2공기</li>
</ul>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

목록 앞 점이 페이지 왼쪽 밖으로 밀려 보이지 않습니다. 함께 복사한 padding: 0이 ul의 왼쪽 안쪽 여백 40px을 지우고, margin: 0이 body의 가장자리 틈까지 지웠습니다.

맞는 규칙: 리셋은 줄마다 뜻을 알고 씁니다. 너비 셈을 바꾸려면 box-sizing 한 줄이면 됩니다.

틀린 생각: 글이 드는 상자는 높이를 정해 두면 깔끔하다.

<div class="box">
  된장을 풀고 두부와 애호박을
  넣어 한소끔 더 끓인 뒤
  불을 끕니다.
</div>
<p>재료</p>

.box {
  width: 120px;
  height: 40px;
}

상자는 40px에서 멈추고, 넘친 글이 아래 '재료'와 겹칩니다. 글은 폭이 좁거나 글자가 크면 더 많은 줄로 꺾입니다.

맞는 규칙: 글이 드는 상자는 높이를 적지 않고 내용만큼 둡니다. 넘친 글을 다루는 법은 둥근 모서리·그림자·넘치는 내용에서 봅니다.

틀린 생각: 같은 width와 안쪽 여백을 주면 단추와 다른 상자의 폭이 같다.

<button>저장</button>
<div>저장</div>

button,
div {
  width: 100px;
  padding-left: 20px;
  padding-right: 20px;
}

단추는 100, div는 140입니다. 단추 · select · 체크박스는 기본 스타일이 처음부터 border-box를 줍니다(크롬 기준).

맞는 규칙: 요소마다 box-sizing이 다를 수 있습니다. 모든 요소에 border-box를 주는 리셋 한 줄이 이 차이를 없앱니다.

확인 문제

1. 예제의 레시피 카드에서 padding을 16px에서 24px로 바꾸면, 카드가 차지하는 너비는 몇 px일까요?

• ① 246px
• ② 270px
• ③ 294px

<article class="recipe-card">
  <h2>김치볶음밥</h2>
</article>

.recipe-card {
  width: 220px;
  padding: 24px;
  border: 1px solid #d2d2d7;
  margin: 12px;
}

2. 동아리 공지 상자의 차지하는 너비를 상자 셈으로 구합니다. 셋째 걸음의 값을 쓰세요.

<div class="notice">
  모임 안내
</div>

.notice {
  width: 200px;
  padding: 10px;
  border: 3px solid #005bb5;
  margin: 20px;
}

아래는 셈 표입니다.

3. 플로우 카페 메뉴 칸입니다. 이 칸의 내용 칸 너비는 몇 px일까요?

<div class="menu">
  라테 4500원
</div>

.menu {
  box-sizing: border-box;
  width: 240px;
  padding: 20px;
  border: 2px solid #6e6e73;
}

• ① 196px
• ② 200px
• ③ 240px

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 3절의 border-box 코드를 index.html과 style.css로 저장하고 link로 이어 엽니다(문서 뼈대의 body 안에 예제 HTML을 넣습니다). 상자를 검사해 Computed 창 상자 그림의 가운데 숫자를 봅니다. box-sizing 줄을 지우면 가운데 숫자와 상자가 차지하는 너비가 어떻게 될지 먼저 적고, 저장하고 새로고침해 맞춰 봅니다.