[CSS] width에 padding, margin 포함시키기

[ 문제점 ]

 일반적으로 div 에 width를 지정하면 이는 padding, margin이 포함되지 않는다. figma와 같은 디자인을 받았을 때 전체 width 값이 주어지고, padding과 margin이 따로 주어진다면 이를 맞추기 위해서 패팅, 마진의 값을 계산으로 빼주어야 하는 상황이 발생한다.

 

[ 해결 방법 ]

 이와 같은 상황에서 패딩, 마진을 포함해서 width를 정하게 해주는 방법이 있다. css에서 box-sizing을 border-box로 해주면 된다.

.box {
  box-sizing: border-box;
  width: 865px;
  padding: 64px;
}