[CSS] padding이 헷깔린다? box-sizing 속성 지정으로 padding 값 직관적으로 조절하기

일전에 워드프레스에서 css 커스터마이징을 하다가 이상한 일을 겪었다.

여태 padding 값을 지정하면 전체 div의 사이즈는 변함이 없이 안쪽의 여백만 조절이 되었는데,

그때는 padding 값을 지정하면 전체 div 사이즈가 변해버리는 것이었다.

당시에 padding은 div의 border 영역 안쪽 여백으로 이해하고 있었기 때문에,

이런 현상이 이해가 안되어서 찾아보니 padding이 지정되는 방식이 두 가지가 있다는 것을 알고 깜짝 놀랐었다.

너비값을 조절하는 방법을 설정하는 box-sizing

---

div의 여러 너비값을 조절하는 방법은 여러 가지가 있다.

div 안의 콘텐츠가 얼마나 길어지든 간에 최우선적으로 콘텐츠가 다 보이도록 지정하는 방법도 있고,

처음 디자인한 div의 가로와 세로 너비를 더이상 변형되지 않게 하는 방법도 있다.

만약 그리드 상에서 콘텐츠의 양이 다르더라도 더이상의 가로 세로 너비 변형이 없기를 바란다면

box-sizing 이라는 속성을 사용해서 고정시켜 주어야한다.

엘리먼트에 box-sizing을 지정하면 해당 엘리먼트의

패딩 및 테두리 영역을 지정하더라도 전체 박스의 너비는 더이상 변하지 않는다.

위의 그림처럼, padding을 지정하면 기본적으로는 콘텐츠 영역의 너비 밖으로 너비가 늘어난다.

위의 그림에 해당하는 codepen 예제를 만들었으니, 이곳을 클릭하여 테스트 해봐도 좋다.

코드펜 예제처럼 가장 오른쪽의 박스처럼 전체 박스에 변형을 가하지 않으려면

다음과 같이, CSS에서 box-sizing을 border-box로 지정해주어야 한다.

div {
box-sizing: border-box;
}

box-sizing 속성

---

w3school을 참고하면, box-sizing 속성 값에는 4가지를 지정할 수 있다.

box-sizing : Property Values

속성 값 Value	설명 Description
content-box	기본 값. 가로와 세로 너비가 콘텐츠 영역만의 가로 세로 너비를 지칭하도록 설정한다. 패딩, 보더, 마진 영역은 지정된 크기에 포함되지 않는다.
border-box	가로와 세로 너비가 마진 영역을 제외하고 콘텐츠 영역, 패딩 영역, 보더 영역을 포함한 크기로 설정한다.
initial	속성의 기본 값으로 설정한다.
inherit	부모 요소의 속성 값을 상속받도록 설정한다.

Can I use : box-sizing ?

그렇다면 이 속성을 여러 브라우저에서 안전하게 사용할 수 있을까? 

다행이도, 모두 사용이 가능하다고 되어있다. prefix 없이 사용하는 경우가 거의 대부분이다.

하지만, 이 기능을 사용했을 때의 Issue가 6가지 정도 나와있으니 유의해서 사용하자.

• Chrome 브라우저에서 box-sizing: border-box 를 사용했을 때 브라우저 줌 레벨이 100%보다 작다면, select 엘리먼트를 사용한 선택 옵션을 사용하는 데 문제가 발생한다.
• IE 8은 min/max-width/height가 사용되었을 때 box-sizing : border-box 설정을 무시한다.
• Safari 6.0.x에서는 display: table 로 설정된 요소에 box-sizing 속성이 적용되지 않는다.
• IE 9는 해당 요소의 position : absolute | fixed일 때나, overflow: auto | overflow-y: scroll일 때, 스크롤바의 가로를 줄여버린다. (IE 9 will subtract the width of the scrollbar to the width of the element when set to position : abosolute/fixed, overflow: auto/ overflow-y: scroll)
• Android 브라우저는 HTML select element의 가로, 세로 면적을 정확히 계산하지 못한다.
• IE 8에서 min-width 속성은 해당 요소의 box-sizing 값이 border-box로 설정이 되어있어도, content-box에 적용이 된다.

참고 사이트

---

1. w3school : box-sizing

2. CSS 레이아웃을 배웁시다 : box-sizing

3. Can I use : box-sizing