width, height

• content의 너비와 높이를 의미합니다.

padding

• 내용물의 바로 인접한 바깥 영역입니다.

border

• padding 영역의 인접한 바깥 영역입니다.

margin

• border 영역의 인접한 바깥 영역이며, 내용물의 가장 외곽의 영역입니다.

background-color 적용

• padding까지만 색이 적용됩니다.

실질적인 크기

• 전체 너비 : 내용물의 너비 + 2 * (padding + border + margin)
• 전체 높이 : 내용물의 높이 + 2 * (padding + border + margin)
• 크롬에서 나오는 것은 margin을 제외한 크기

크기 조절

box-sizing 속성

content-box

• content의 height와 width의 크기가 오로지 content의 크기만을 포함한 영역임을 설정

<style>
  div {
     box-sizing : content-box;
   }
</style>

border-box

• content의 height와 width의 크기가 border까지의 영역을 포함한 영역임을 설정
• 따라서, content의 height, width가 입력한 수치보다 작아질 수 있습니다.

<style>
  div {
     box-sizing : border-box;
   }
</style>