box-sizing

box-sizing

박스의 크기를 어떤 것을 기준으로 계산할지 정하는 속성입니다.
보통 content-box 는 잡기가 어려워 border-box로 작업합니다.

section {
    box-sizing :  border-box;
}

• content-box : 콘텐츠 영역을 기준으로 크기를 정합니다.
• border-box : 테두리를 기준으로 크기를 정합니다.
• initial : 기본값을 설정합니다.
• inherit : 부모 요소의 속성값을 상속받습니다.

border-box

하단의 이미지처럼 width 값이 margin을 제외하고 포함된 단위로 알 수 있다.