css box-sizing

모든 html 요소는 디폴트로 box-sizing이 content-type 이다. 따라서 padding 을 주면 우리가 원하는 방향과 다르게 크기가 변한다.

.box {
  width: 480px;
  height: 480px;
  padding-top: 40px;
  padding-left: 50px;
  background-color: #0066ff;
  color: #fff;
}

• 위의 코드는 얼핏 보면 box 클래스에 해당하는 내용을 가로, 세로 480px 설정하고 padding을 준 것으로 보인다.
• 하지만 위처럼 진행하면 box 클래스에 해당하는 내용이 가로는 (480 + 40) px , 세로는 (480 + 50) px로 등록이 된다.
• 이는 box-sizing이 디폴트로 content-type 이기 때문이다. 이 문제는 box-sizing: border-box; 을 적용하면 자연스레 해결 된다.

* {
  box-sizing: border-box;
}

• 위 코드를 대부분 작성하고 시작한다고들 한다.