CSS 패딩이 요소의 크기를 늘리는 이유는 무엇입니까?

Question

저는 div와 textarea에 약간의 덧 덧셈을 주려고합니다. 이 작업을 수행 할 때 요소 내부의 내용 영역을 축소하는 대신 요소의 크기를 나타냅니다. 내가하려는 일을 성취 할 수있는 방법이 있습니까?

도움 주셔서 감사합니다.

Answer 1

브라우저에 따라 다르며 구현은 box model입니다. 당신이 겪고있는 것은 올바른 행동입니다.

IE는 전통적으로 잘못을 가지고 : http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Answer 2

따르면 CSS2 specs에, 상자 형 요소의 렌더링 된 너비 폭의 합과 같다, 왼쪽/오른쪽의 경계와 왼쪽/오른쪽 패딩 (왼쪽/오른쪽 여백 놀이에 또한 들어간다). 상자의 너비가 '100 %'이고 여백, 테두리 및 패딩이있는 경우 개체가 차지하는 너비에 영향을줍니다 (증가).

텍스트 영역을 100 % 넓이로 지정해야하는 경우 width, margin-left/right, border-left/right 및 padding-left/right에 합계가 100 %가되도록 값을 할당하십시오.

---

우리는 three box-sizing models을 가지고 있습니다. 이 요소는 요소의 경계 박스를 결정

지정된 폭 및 높이 (각각의 최소/최대 특성) 에 : 현재 border-box 모델을 사용할 수있다. 즉, 요소에 지정된 여백 또는 테두리가 배치되고이 지정된 너비와 높이 내에 으로 그려집니다. 콘텐츠 너비와 높이 은 지정된 '너비'및 '높이'속성에서 각 변의 경계 및 패딩 너비를 빼서 계산합니다.

Answer 3

이것은 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> 

을 고정 크기 컨테이너에만 적용

Answer 4

패딩 및/또는 경계를 요소에 추가 할 때 달라지지 않는 너비와 높이를 지정할 수 있도록 box-sizing:border-box을 컨테이너 요소에 추가 할 수 있습니다.

사양은 here (MDN)을 참조하십시오.

업데이트 과정의 MDN Specs

일부 브라우저에 따라,

는 지금, 값 border-box 모든 주요 브라우저에서 지원됩니다 (복사 댓글이 대답은) 적절한 접두사를 필요 즉,자동 : 당신은 분명히 더 크로스 브라우저 솔루션을 here

Answer 5

를 볼 수 -webkit 및 -moz, 당신은 고정 된 폭이 다른 태그에 패딩을 필요로 어떤 태그를 포장하고 폭함으로써이 문제를 피할 수 있습니다. 이렇게하면 부모의 폭이 x이고 자식에 패딩을 추가하면 자식은 부모 폭이나 고유 한 값을 수정하지 않고 채우기를 올바르게 적용하여 x의 전체 너비를 상속합니다.

Answer 6

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

N.B - 당신이 패딩