box-sizing

1. box-sizing

box-sizing 속성은 요소 크기에 패딩 포함 여부를 설정합니다.

박스 요소의 width 값은 margin, padding, border 값을 포함하여 계산합니다.

box-sizing: border-box로 설정할 경우 박스 요소의 width 값은 margin, border 값을 포함하여 계산합니다. padding 값은 제외...

 

2. box-sizing 문법 

 

/* 기본 속성 */
box-sizing: content-box;(기본값)  → border, padding 값이 포함되지 않는다. 
box-sizing: border-box;                → border, padding 값이 포함해서 width값을 계산한다.

/* 기본 값으로 설정합니다. */
box-sizing: initial;

/* 부모 요소의 값을 상속받습니다. */
box-sizing: inherit;

 

3. 예제