[HTML/CSS] div에서 padding 적용 시 자동으로 박스 크기의 확장이 일어나지 않게 하는 방법

일반적으로 div에서 padding 속성을 적용하면 우리가 정의한 width, height 박스 크기보다 크게 확장이 되는 것을 보실 수 있습니다.

 

이는 div의 기본 box-sizing 속성이 content-box로 설정이 되어 있어서 그렇습니다.

 

즉, content영역의 width와 height만 우리가 정해준 크기이고 전체 박스의 크기는 width, height 더하기 padding 더하기 border 사이즈 인 것이죠.

 

이것을 box-sizing: border-box;로 설정해주시면 콘텐트, 패딩, 보더를 포함한 전체 박스의 width와 height를 정의해 주게 되므로, 패딩 적용시에도 박스가 확대되지 않는 것을 보실 수 있습니다.