CSS box-sizing 알아보기

box-sizing 이란?

박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성
box-sizing 속성을 사용하면 엘리먼트의 패딩과 테두리가 너비에 영향을 주지 않습니다.

이렇게 하면 모든 엘리먼트가 직관적인 방식으로 크기가 설정되기 때문에 아에 전역 설정으로 사용하곤 합니다.

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

box-sizing 설정 값

box-sizing: content-box | border-box | initial | inherit

content-box
border와 padding을 제외하고 content 영역을 기준으로 박스 사이즈가 결정된다.

border-box
border와 padding을 모두 포함한 영역을 기준으로 박스 사이즈가 결정된다.

initial
default 값으로 설정한다.

inherit
부모 요소의 속성값을 상속받는다.

샘플 코드

 

결과

모두 즐거운 코딩하세요~