box-sizing : border-box 이용하기

✔️  box-sizing 속성은 요소(element)의 너비와 높이를 계산하는 방법을 지정한다.

 

content-box는 css의 기본 설정으로, 크기값을 컨텐츠 영역에 적용하고 border와 padding값은 추가로 더해진다.

border-box는 border와 padding도 요소의 크기값에 포함하기 때문에 컨텐츠 영역이 줄어들게 된다.

예를 들어 content-box설정에서 height값을 100px주고, padding값을 10px, border를 5px주게되면 총 높이는 100+10*2+5*2=130px가 된다.

반면 border-box설정을 주게되면 총 높이는 padding값과 border값과는 상관없이 100px이 된다.

 

텍스트 중앙 정렬을 위해 padding-top값을 3.5px주었더니 컨텐츠 영역에 21px가 적용되어 총 높이가 26.5px가 되어버렸다.

이를 해결하기 위해 box-sizing: border-box를 주었고, 높이값이 원하는 값인 21px로 적용되었다!

수정 전 -> 수정 후

 

참고 - https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing