CSS 상자 모델이 실패합니다 : 총 너비가 지정된 값으로 유지됩니다.

Question

Wordpress에서 매우 이상한 (나를 위해) 동작을 발견했습니다. 다음의 간단한 예를 살펴 보겠습니다. 내 예제에서 200px로 너비를 약간의 값으로 설정하면; border를 1px로 지정하면 요소의 총 너비 (예 : content + padding + border)가 200px로 유지됩니다.

상자 모델 - http://www.w3.org/TR/CSS2/box.html에 따르면 200px로 지정하고 1px로 경계를 지정하면 총 너비는 202px 여야합니다 (패딩이 지정되지 않은 경우). 그러나 Wordpress (버전 3.6에서 테스트)에서는 200px로 유지됩니다. 항상, 그래서 전체 폭 I는, 경계의 값을 증가 예 4 픽셀하도록 설정을 위해 상기 콘텐츠 192px 될 경우 콘텐츠는 그래서 198 + 2 = 200

예

<div id="test">.</div> 

#test { 
display:block; 
width:200px; 
border:1px solid red; 
background-color:black; 
} 

를 198px진다 200 픽셀 남아 있습니다.

어떻게 설명 할 수 있으며 기본 동작을 복원하는 방법은 무엇입니까?

Answer 1

box-sizing을 참조하십시오.

귀하의 경우 모든 요소 (*) 또는 그 중 div에 대해 box-sizing: border-box;이 설정되어 있습니다.