CSS3 box-sizing 속성없이

기본적으로 요소의 너비와 높이는 다음과 같이 계산됩니다.

width + padding + border = 요소 

높이 의 실제 폭 + 채우기 + 테두리 = 요소의 실제 높이

즉, 요소의 너비 / 높이를 설정하면 요소의 테두리와 채우기가 요소의 지정된 너비 / 높이에 추가되므로 요소가 설정 한 것보다 자주 표시됩니다.

다음 그림은 폭과 높이가 지정된 두 개의 <div> 요소를 보여줍니다.

위의 두 <div> 요소는 결과에서 다른 크기로 끝납니다 (div2에 패딩이 지정되었으므로).

 

예

.div1 {

    width: 300px;

    height: 100px;

    border: 1px solid blue; 

}

.div2 {

    width: 300px;

    height: 100px;

    padding: 50px;

    border: 1px solid red;

}

그래서 오랫동안 웹 개발자는 패딩과 테두리를 빼야하기 때문에 원하는 것보다 더 작은 너비 값을 지정했습니다.

CSS3를 사용하면이 box-sizing속성이이 문제를 해결합니다.