테두리가있는 요소에 너비를 적용하는 방법?

Question

내 페이지 레이아웃에 Twitter Bootstrap을 사용하고 있는데 한 열에 CSS3 Box Shadow을 삽입하고 싶습니다.

유일한 문제는 상자 그림자에 1px 테두리가 있고 두 번째 열이 다음 줄로 감싸기에 충분하다는 것입니다. 테두리를 제거하면 잘 정렬됩니다.

열 너비에서 2 픽셀을 빼면 원하는 모양을 정확하게 나타냅니다. 그러나 Bootstrap의 유체 레이아웃 (픽셀이 아닌 퍼센트를 기반으로 함)을 활용하고 싶습니다. 따라서 <div>을 다른 픽셀보다 2 픽셀 더 간단하게 만들 수있는 쉬운 방법은 없습니다.

테두리가 항목 너비 내에 머물러 있지 않은 방식을 정말 싫어합니다. 누구나 내 <div> 테두리를 사용하여 현재 너비를 존중하는 방법을 볼 수 있습니까?

Answer 1

사용

-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 

과 경계의 폭은 상자 안에 추가됩니다.

다음은 100x100 크기와 20px 테두리가있는 두 개의 div가있는 예입니다. 첫 번째 상자에는 '상자 크기'가 있고 두 번째 상자에는 없습니다 : http://jsfiddle.net/y3zxC/.