border-box vs. content-box 간단정리

사실 글 볼 필요 없다. 아래 사이트로 가자. 간략한 정리만 본다면 몰라도..
box-sizing mdn

누구나 매번 작업할 때마다 헷갈리는게 있다.
내게도 몇 개 되는데, 그 중 하나가 box-sizing이었다.

그래서 나중에 다시 찾게 될까
간단하게 남겨놓고자 한다.

border-box vs. content-box

width, height 100px, border 5px, padding 10px

• border-box
  5(border) + 10(padding) + 85(100px - 10px - 5px) = 100px(계산된 width, height px);
  요소의 크기는 너비 = 콘텐츠 너비, 높이 = 콘텐츠 높이로 계산하고 테두리와 안쪽 여백은 식에 넣지 않습니다.
• content-box
  5(border) + 10(padding) + 100 = 115px(계산된 width, height px);
  요소의 크기는 너비 = 테두리 + 안쪽 여백 + 콘텐츠 너비, 높이 = 테두리 + 안쪽 여백 + 콘텐츠 높이로 계산합니다.

언제 사용하지?

• border-box
  스타일을 적용하려는 element의 크기를 크게 고려하지 않고 border/padding을 부여하고 싶을 때.
• content-box
  스타일을 적용하려는 element의 크기와 border/padding을 다 고려할 때.

주의할 점

• 초기값은 content-box이다. 개인적으로 글로벌 설정으로 border-box로 만들어 쓰는게 좋을 것 같다.

주저리

• 개인 작업 할 때 말고는 거진 다 content-box로 진행하게 된다. 그래서 내부 값들을 항상 계산하게 된다.