Box Model

HTML

<div class="content-box">Content box</div><br /><div class="border-box">Border box</div>

CSS

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
}

.border-box {
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

결과

box model

• box-sizing : content-box는 컨텐자체의 width, height을 결정하기 때문에 border, padding을 얼마를 넣든 컨텐사이즈는 변하지 않는다.
• box-sizing: border-box 는 border까지 포함하도록 박스사이즈가 결정된다.