[css] box-sizing: border-box

퍼블리싱을 하는데 브라우저 검사를 통해 모바일 화면을 보면 꽉 차보이지 않고 패딩 준 부분이 들어가서 백그라운드 색이 그 패딩 준 만큼 안보였다.

흠.. 이상하네..

알고봤더니

*{
   box-sizing: border-box;
}

를 줘야 했었다.

그냥 퍼블리싱 할때 저 코딩은 무조건 넣고 하는것이 정신건강에 좋다.

그래도 설명을 듣고 싶은 사람은 위해 간략하게 정리를 하면

box-sizing: content;에 border나 padding을 추가하면 요소의 너비나 높이에 추가가 되어 해당 box의 크기는 그만큼 더 커지게 된다.

즉, 내가 만약 이 box의 너비나 높이를 설정하려면 예를 들어, 단순히 width: 50px; 혹은 height: 50px; 를 줄 수 있지만, 거기에 border 값이나 padding 값이 더 해져야 한다면 width값은 50px이 아닌 50px + (border값 혹은 padding값) 이상이 될 것이다.

반면에, box-sizing: border-box;에 border나 padding을 추가하면 해당 box의 크기는 그만큼 더 커지지 않고 사용자가 지정한 너비나 높이만큼 길이에 맞추게 된다. border값이나 padding 값는 지정한  width값이나 height값에 포함이 된다는 것이다.