CSS에서 패딩 속성의 폭이나 높이가 변경되지 않도록 하려면 어떻게 해야 합니까?

CSS에서 패딩 속성의 폭이나 높이가 변경되지 않도록 하려면 어떻게 해야 합니까?

다음과 함께 사이트를 만들고 있습니다.DIVs. 제가 DIV를 만들 때만 빼고는 다 잘 되고 있습니다.다음과 같이 작성합니다(예).

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

추가할 때.padding-left속성, 너비DIV220px로 변경하고 200px로 유지하고 싶습니다.

내가 다른 사람을 만든다고 치자.DIV이름 지어진anotherdiv와 완전히 같은newdiv, 안에 집어넣습니다.newdiv그렇지만newdiv패딩이 없고.anotherdiv가지다padding-left: 20px. 저도 같은 말을 듣지만,newdiv폭은 220파운드가 될 겁니다.

이 문제를 해결하려면 어떻게 해야 합니까?

속성 추가:

-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에서는 작동하지 않습니다.

새 디브에 디브를 넣으십시오.width: auto그리고.margin-left: 20px

newdiv에서 패딩을 제거합니다.

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

이거 먹어봐요.

box-sizing: border-box;

디바의 크기를 변경하지 않고 디바 내에서 텍스트를 들여쓰려면 CSS를 사용합니다.text-indent대신에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;

위의 많은 답변들은 맞지만 설명은 거의 하지 않아서 필요한 사람들을 위해 이것을 추가하기를 결정했습니다.

기본적으로 모든 요소box-sizing매개 변수가 다음으로 설정됩니다.content-box. 즉, 요소 너비를 200px로 설정한 다음 수평 끝에 20px의 패딩을 추가하면 해당 요소의 총 너비가 240px가 됩니다.

이것을 고치기 위해서, 당신은 단지 업데이트하기만 하면 됩니다.box-sizing매개변수를 지정하고 설정합니다.border-box당신의 css에서.또는 다음을 추가하기만 하면 모든 요소에 대해 이 작업을 수행할 수 있습니다.

* {
     box-sizing: border-box 
  }

이것은 브라우저가 요소의 너비와 높이에 대해 지정한 값의 테두리와 패딩을 고려하도록 지시합니다.

따라서 요소 집합의 경우border-box가로 200㎝, 세로 20㎝의 패딩을 양옆에 배치하면 전체 가로 200㎝(콘텐츠 박스 160㎝, 패딩 40㎝)는 그대로 유지됩니다.

도움이 되길 바랍니다.당신은 CSS 박스 사이즈에 대해 더 많이 읽습니다.

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

네, 그것은 정확히 기준에 따른 것입니다.원래 그런 식으로 작동하는 겁니다.

제가 newdiv와 정확히 동일한 다른 div라는 이름의 다른 div를 만들어서 newdiv 안에 넣었는데 newdiv는 패딩이 없고 다른 div는 패딩-레프트: 20px가 있다고 가정해 보겠습니다.저도 같은 생각입니다, newdiv의 폭은 220px가 될 것입니다;

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

이것은 모든 경우에 효과가 있을 것이며, 미리 정의된 너비에 추가 패딩이 포함됩니다.

상자 상자: 테두리 상자;

만약 당신이 20파운드의 패딩을 가지고 있다면 그것은 당신의 디브의 폭에 40파운드를 추가하기 때문에 당신의 디브를 정상적으로 보이게 하고 추가 폭으로 왜곡되지 않고 당신의 문자가 엉망이 되도록 하기 위해 당신은 폭에서 40파운드를 빼야 합니다.

언급URL : https://stackoverflow.com/questions/779434/how-do-i-prevent-the-padding-property-from-changing-width-or-height-in-css