box-sizing

개발을 하다가 자꾸 fixed인 div 요소가 화면 밖을 벗어나는 현상이 있었다. div에 width: 100%를 설정해두고, 안에 padding을 설정했는데, width가 화면 전체 너비를 차지할 것이라는 예상과 달리 화면 밖을 벗어나는 것이었다. 이는 box-sizing: border-box;라는 css 속성을 변경함으로써 해결될 수 있었다.

 

box-sizing: content-box;

기본적으로 CSS는 box-sizing: content-box;로 설정되어 있다. 이 방식에서는 width와 height가 컨텐츠 영역만을 포함하며, padding과 border 같은 요소는 width와 height에 포함되지 않는다.

.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box; /* 기본값 */
}

• width: 200px;이라고 해도, padding과 border가 추가됨 → 총 너비가 250px이 됨(200 + 202 + 52 = 250px)
• height: 100px;이라고 해도, padding과 border가 추가됨 → 총 높이가 150px이 됨(100 + 202 + 52 = 150px)

 

box-sizing: border-box;

이 방식에서는 padding과 border 같은 오소가 width와 height에 포함된다. 즉, width와 height는 실제 크기를 유지하고, 내부 요소가 크기에 맞춰 조정된다.

.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: border-box;
}

• width: 200px;이라고 설정하면, padding과 border가 포함됨 → 총 너비가 200px 유지됨
• height: 100px;이라고 설정하면, padding과 border가 포함됨 → 총 높이가 100px 유지됨

즉, 내부 컨텐츠 영역(content)의 크기가 자동으로 조정되어 요소의 전체 크기가 정확하게 200x100px로 유지된다.

 

언제 border-box 속성을 사용하면 좋을까?

모달이나 카드 UI 등 크기를 일정하게 유지해야 하는 경우, 사용하면 좋을 것이다.