box-sizing에서 content-box, border-box 차이점

마음으로는 알고 있지만, 말로 어떻게 설명할지 헷갈리는 box-sizing에서의 content-box, border-box를 정리해보고자 한다.

 

 

box-sizing 속성은 CSS의 테두리 영역 크기를 결정한다.

 

content-box: css width와 height를 컨텐츠 영역에만 적용한다.
border, padding, margin은 따로 계산되어서 전체 영역이 설정값보다 커질 수 있다.

 

border-box: css width와 height를 전체 영역에 적용한다.
border, padding, margin을 모두 합산하기 때문에 컨텐츠 영역이 설정값보다 작아질 수 있다.

즉, 컨텐츠의 크기 = 전체크기 - border - padding - margin 이다.

 

 

 

• 참고
  https://dasima.xyz/css-box-sizing-content-box-vs-border-box/

한번 누르면 2시간동안 보이지 않아요 ㅎㅎ 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

원치 않을 경우 를 눌러주세요