[CSS] box-sizing (content-box, border-box)

 

 

위에 좋은 예제가 있다.

 

과연 정답은 무엇일까?

 

content box

위의 정답은 기본적으로 오른쪽처럼 그려지게 된다.width를 200px으로 설정했어도, 전체 너비가 200px이 되는것이 아니라, 

거기에 padding, border-width가 더해져서 그려지게 되기 때문이다.

이런 계산법을 content-box라고 하며, box-sizing 속성 content-box로 주게 되면 위와 같이 게산하게 된다.

즉, content-box가 기본값이다.

 

border-box

만약 위 그림에서 왼쪽 처럼 렌더링하고 싶다면 어떻게 해야할까?

box-sizing 속성을 border-box로 주면된다. (단, IE8 이상에서만 사용가능)

 

 

왜 border-box를 사용하는가?

CSS에서width 속성을 100%로 주면, 부모의 width 만큼 너비가 설정된다.

하지만 content-box일 때, width: 100%에 이어서 padding이나 border를 주게 되면, 부모의 영역을 초과해서 너비가 정해지는 문제가 생길 수 있다.

이런 문제를 해결하기 위해서는 box-sizing을 border-box로 주거나 width: auto; (아예 적용안함)로 설정하여 해결할 수 있다.