CSS 패딩이 요소의 크기를 증가시키는 이유는 무엇입니까?

내 div 및 텍스트 영역에 약간의 패딩을 제공하려고합니다. 이렇게하면 요소 내부의 콘텐츠 영역이 축소되는 대신 요소의 크기가 증가합니다. 내가하려는 일을 성취 할 수있는 방법이 있습니까?

box-sizing:border-box컨테이너 요소에 추가 하여 요소에 패딩 및 / 또는 테두리를 추가 할 때 변경되지 않는 너비와 높이를 지정할 수 있습니다.

사양은 여기 (MDN) 를 참조 하십시오 .

업데이트 (답변을 위해 복사 된 댓글)

현재이 값 border-box은 MDN 사양 에 따라 모든 주요 브라우저에서 지원됩니다.

물론 일부 브라우저 즉 접두사 적절한을 필요로 -webkit하고 -moz당신은 명확하게 볼 수 있습니다 여기에

CSS2 사양 에 따르면 상자 유형 요소의 렌더링 된 너비는 너비, 왼쪽 / 오른쪽 테두리 및 왼쪽 / 오른쪽 패딩의 합과 같습니다 (왼쪽 / 오른쪽 여백도 적용됨). 상자의 너비가 '100 %'이고 여백, 테두리 및 패딩이있는 경우 개체가 차지하는 너비에 영향을줍니다 (증가).

따라서 텍스트 영역의 너비를 100 %로 설정해야하는 경우 합계가 100 %가되도록 width, margin-left / right, border-left / right 및 padding-left / right에 값을 할당하십시오.

CSS3에는 세 가지 상자 크기 모델이 있습니다. border-box모델 을 사용할 수 있습니다 .

이 요소에 지정된 너비와 높이 (및 각 최소 / 최대 속성)는 요소의 테두리 상자를 결정합니다. 즉, 요소에 지정된 패딩 또는 테두리가이 지정된 너비와 높이 내에 배치되고 그려집니다. 콘텐츠 너비와 높이는 지정된 'width'및 'height'속성에서 각면의 테두리 및 패딩 너비를 빼서 계산됩니다.

이것은 W3C 부분의 엉망이었고 다양한 브라우저는 자체 버전의 박스 모델로 인해 이러한 복잡성을 더했습니다. 개인적으로 어떤 브라우저 또는 CSS 설정이 트릭을 수행할지 생각하는 대신 다음과 같이 패딩을 사용하는 대신 상자의 내용을 또 다른 DIV 문에 래핑하고 해당 DIV에 여백을 사용합니다.

<div id="container" style="width: 300px; border: 10px solid red;">
   <div id="content" style="width: 250px; margin: 25px;">
      Some content
   </div>
</div>

이것은 고정 크기 컨테이너에서만 작동하지만

그것은 브라우저와 박스 모델 의 구현에 따라 다릅니다 . 당신이 경험하고있는 것은 올바른 행동입니다.

IE는 전통적으로 틀 렸습니다 : http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

더 많은 브라우저 간 솔루션의 경우 패딩이 필요한 태그를 고정 너비의 다른 태그로 래핑하고 width : auto를 지정하여 이러한 동작을 피할 수 있습니다. 이렇게하면 부모의 너비가 x이고 자식에 패딩을 추가하면 자식은 x의 전체 너비를 상속하여 부모 너비 또는 자체 너비를 수정하지 않고 패딩을 올바르게 적용합니다.

DIV 기본적으로 브라우저 호환성 문제를 방지하기 때문에, 부모 컨테이너의 폭을 소요, 당신은 추가 할 수 있습니다 자식 DIV를 지정된에 DIV 다음에 필요한 패딩을 추가 자식 DIV .

주의 -패딩을 추가하면 너비가 증가하므로 자식 div에 너비를 지정하지 마십시오.