Como evito que a propriedade padding altere a largura ou a altura no CSS?

Estou criando um site com DIVs. Tudo está dando certo, exceto quando eu crio um DIV. Eu os crio assim (exemplo):

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

Quando adiciono a padding-leftpropriedade, a largura das DIValterações é de 220px e quero que ela permaneça em 200px.

Digamos que eu crie outro DIVnome anotherdivexatamente igual a newdive o coloque dentro, newdivmas newdivnão tem preenchimento e anotherdivpossui padding-left: 20px. Eu recebo a mesma coisa, newdiva largura será de 220px.

Como posso resolver este problema?

Adicionar propriedade:

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

Nota: Isso não funcionará no Internet Explorer abaixo da versão 8.

Coloque uma div no seu newdiv com width: autoemargin-left: 20px

Remova o preenchimento do newdiv.

A página do modelo W3 Box tem boas informações.

Tente isto

box-sizing: border-box;

Se você deseja recuar o texto dentro de uma div sem alterar o tamanho da div, use o CSS em text-indentvez de padding-left.

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

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

<br>

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

basta adicionar box-sizing: border-box;

quando adiciono a propriedade padding-left, a largura do DIV muda para 220px

Sim, isso é exatamente de acordo com os padrões. É assim que deve funcionar.

Digamos que eu crie outro DIV chamado anotherdiv exatamente o mesmo que newdiv e coloque-o dentro de newdiv, mas newdiv não tem preenchimento e outrodiv tem preenchimento à esquerda: 20px. Eu recebo a mesma coisa, a largura do newdiv será 220px;

Não, o newdiv permanecerá com 200 pixels de largura.

apenas altere a largura da sua div para 160px, se você tiver um preenchimento de 20px, ela adiciona 40px a mais à largura da sua div, para subtrair 40px da largura, a fim de manter sua div parecer normal e não distorcer a largura da div. seu texto todo bagunçado.