박스 모델

요소는 네 겹으로 자리를 차지합니다

화면의 모든 요소는 상자입니다. 그 상자는 안쪽부터 네 겹으로 이루어집니다.

네 겹을 눈으로 보기

값을 바꿔 가며 어느 자리가 늘어나는지 확인하십시오.

<div class="outer">
  <div class="box">내용입니다</div>
</div>

.outer { background: #f1f3f5; }

.box {
  width: 200px;
  padding: 20px;          /* 안쪽 여백 */
  border: 4px solid #6e56cf; /* 테두리 */
  margin: 24px;           /* 바깥 여백 */
  background: #ece7fb;
}

바깥 여백에는 바탕색이 칠해지지 않습니다. 상자 밖의 회색이 그 자리입니다.

값을 한 번에 적기

네 방향을 한 줄로 적을 수 있습니다. 값의 개수에 따라 뜻이 달라집니다.

padding: 10px;                /* 네 방향 모두 */
padding: 10px 20px;           /* 위아래 / 좌우 */
padding: 10px 20px 30px;      /* 위 / 좌우 / 아래 */
padding: 10px 20px 30px 40px; /* 위 오른쪽 아래 왼쪽 — 시계 방향 */

/* 한 방향만 정할 수도 있습니다 */
padding-top: 10px;
margin-bottom: 24px;

네 개를 적을 때는 위에서 시작해 시계 방향입니다.

box-sizing — 폭이 어긋나는 까닭

width: 200px 이라고 적었는데 실제로는 더 넓게 자리를 차지합니다. 기본값에서는 width 가 내용의 너비이고, 안쪽 여백과 테두리는 그 바깥에 더해지기 때문입니다.

width: 200px
padding: 20px
border: 4px

실제 너비
200 + 40 + 8 = 248px

width: 200px
padding: 20px
border: 4px

실제 너비
200px (내용이 152px 로)

<div class="a">content-box (기본값)</div>
<div class="b">border-box</div>

.a, .b {
  width: 200px;
  padding: 20px;
  border: 4px solid #6e56cf;
  margin-bottom: 12px;
  background: #ece7fb;
}

/* 적은 값이 곧 실제 너비가 됩니다 */
.b { box-sizing: border-box; }

대부분의 사이트는 모든 요소에 border-box 를 지정해 둡니다. 적은 값과 실제 너비가 같아 계산이 단순해지기 때문입니다.

* { box-sizing: border-box; }

세 가지

• 너비를 맞췄는데 넘칩니다. box-sizing 을 지정하지 않고 width: 100% 에 padding 을 준 경우입니다. 100% 에 여백이 더해져 부모를 넘습니다.
• 여백을 padding 으로 줄지 margin 으로 줄지 헷갈립니다. 바탕색이 칠해져야 하면 padding, 다른 요소와 떨어뜨리는 것이면 margin 입니다.
• height 를 고정합니다. 글이 길어지면 넘칩니다. 높이는 대개 내용이 정하게 두고, 필요하면 min-height 를 사용하십시오.

직접 해보기

정리

• 상자는 내용 · padding · border · margin 네 겹입니다.
• padding 에는 바탕색이 칠해지고 margin 에는 칠해지지 않습니다.
• 값을 네 개 적으면 위에서 시계 방향입니다.
• box-sizing: border-box 를 지정하면 적은 값이 곧 실제 너비입니다.