CSS에서 패딩 속성이 너비 나 높이를 변경하지 못하게하려면 어떻게합니까?

DIVs가 있는 사이트를 만들고 있습니다 . DIV를 만들 때를 제외하고는 모든 것이 잘 작동합니다. 다음과 같이 작성합니다 (예).

newdiv {
    width: 200px;
    height: 60px;
    padding-left: 20px;
    text-align: left;
}

padding-left속성을 추가하면 너비 DIV가 220px로 변경되고 200px로 유지하려고합니다.

하자 내가 다른 만들라고 DIV이름 anotherdiv과 정확히 일치를 newdiv, 그리고 내부에 넣어 newdiv하지만 newdiv패딩이 없습니다하고 anotherdiv있다 padding-left: 20px. 나는 같은 것을 얻습니다 newdiv.의 너비는 220px입니다.

이 문제를 어떻게 해결할 수 있습니까?

속성 추가 :

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

참고 : 이 작동하지 않습니다 버전 8 이하 Internet Explorer에서.

귀하의 newdiv에 사업부를 넣어 width: auto및margin-left: 20px

newdiv에서 패딩을 제거하십시오.

W3 Box 모델 페이지에 좋은 정보가 있습니다.

이 시도

box-sizing: border-box;

div의 크기를 변경하지 않고 div 내에서 텍스트를 들여 쓰려면 text-indent대신 대신 CSS 를 사용하십시오 padding-left.

.indent {
  text-indent: 1em;
}
.border {
  border-style: solid;
}

<div class="border">
  Non indented
</div>

<br>

<div class="border indent">
  Indented
</div>

단순히 추가 box-sizing: border-box;

padding-left 속성을 추가하면 DIV의 너비가 220px로 변경됩니다.

예, 그것은 정확히 표준에 따릅니다. 그것이 작동하는 방식입니다.

newdiv와 정확히 동일한 anotherdiv라는 다른 DIV를 만들어 newdiv 안에 넣지 만 newdiv에는 패딩이없고 anotherdiv에는 padding-left : 20px가 있다고 가정 해 봅시다. 같은 것을 얻습니다. newdiv의 너비는 220px입니다.

아니요, newdiv는 200px 너비로 유지됩니다.

패딩이 20px 인 경우 div 너비를 160px로 변경하면 div 너비에 40px가 더해 지므로 div를 정상으로 유지하고 여분의 너비로 왜곡되지 않도록 너비에서 40px를 빼야합니다. 당신의 텍스트는 엉망입니다.