박스
위 랍스터 콘텐트이 크기는 300*200인 반면 지금 읽고 있는 엘리먼트의 크기는 콘텐트 폭 300, 패딩 20, 보더 10을 더한 330 입니다.
하지만, box-sizing의 border-box 속성값을 사용하면 콘텐트, 패딩, 보더를 포함하여 그림과 같이 너비가 300이 됩니다.
300px 그림 두개를 붙여봅시다. 그림의 너비가 300이고 보더가 1px이므로 그림이 한 블럭안에 나타나지 않습니다. 하지만, box-sizing의 border-box 사용하고 너비를 50%로 설정하면 복잡한 계산없이 표현됩니다.