박스모델 사이즈에 대한 주의

CSS의 박스모델을 잘못 이해하는 경우가 많이 있습니다. "박스모델"이란 요소(Element)를 시각적으로 나타내는 연속적인 박스들이라고 볼 수 있습니다. 가장 안 쪽의 content로 시작하며, padding, border가 content를 감싸고 있습니다. 이러한 구조로 인해서 박스모델의 사이즈를 계산하는 것을 혼란스러워 하는 사람도 있습니다. 아래 예시를 살펴봅시다.

.mybox {
    border: 1px solid black;
    padding: 5px;
    width: 100px;
}

개발자는 mybox 클래스를 가진 요소의 width를 100 픽셀이라고 생각할 지도 모릅니다. 그렇지만 실제 width는 112픽셀인데, 이는 width가 content, padding, border의 합으로 나타나기 때문입니다. 흔히 이러한 속성(Property)을 조합할 때 다른 실수를 범해서 오류가 발생하기도 합니다.

대부분의 브라우저가 요소의 전체크기를 따르도록 width와 height를 강제할 수 있는데, 이를 위해서는 다음의 예시와 같이 box-sizing 속성에 border-box를 주면 됩니다.

.mybox {
    box-sizing: border-box;
    border: 1px solid black;
    padding: 5px;
    width: 100px;
}

이렇게 하면 mybox 클래스를 부여받은 요소는 실제로 width가 100픽셀이 되고, padding과 border도 이 영역안에 포함되어 content는 100픽셀이 아닌 88픽셀을 차지하게 됩니다.

규칙 상세설명

규칙(Rule) ID: box-model

이 규칙은 의도하지 않은 박스 모델 크기와 관련한 이슈를 없애는 것을 목표로 합니다. CSS Lint는 다음의 경우를 문제로 판단합니다.

1. width가 border, border-left, border-right, padding, padding-left, 혹은 padding-right와 함께 사용되고 있는 경우
2. height가 border, border-top, border-bottom, padding, padding-top, 혹은 padding-bottom과 함께 사용되고 있는 경우

만약 box-sizing 속성이 명시된다면, CSS Lint는 여러분이 작성한 내용을 잘 이해하고 있다고 판단하여 위와 같은 조건에도 경고를 나타내지 않을 것입니다.

CSS Lint는 다음과 같은 경우를 오류로 판단합니다.

/* width와 border */
.mybox {
    border: 1px solid black;
    width: 100px;
}

/* height와 padding */
.mybox {
    height: 100px;
    padding: 10px;
}

반면에 아래와 같은 경우에는 정상적인 것으로 판단합니다.

/* width와 border를 box-sizing과 함께 사용한 경우 */
.mybox {
    box-sizing: border-box;
    border: 1px solid black;
    width: 100px;
}

/* width와 border-top */
.mybox {
    border-top: 1px solid black;
    width: 100px;
}

/* height와 border-top을 none으로 작성한 경우 */
.mybox {
    border-top: none;
    height: 100px;
}

조금 더 살펴보기

• The CSS Box Model(영문)
• 박스모델 이해하기(영문)

---

원문: https://github.com/stubbornella/csslint/wiki/Beware-of-box-model-size