Bagaimana cara mencegah properti padding dari mengubah lebar atau tinggi di CSS?

Saya membuat situs dengan DIVs. Semuanya berfungsi kecuali ketika saya membuat DIV. Saya membuatnya seperti ini (contoh):

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

Ketika saya menambahkan padding-leftproperti, lebar DIVperubahan ke 220px, dan saya ingin tetap di 200px.

Katakanlah saya membuat yang lain DIVbernama anotherdivpersis sama dengan newdiv, dan memasukkannya ke dalam newdivtetapi newdivtidak memiliki padding dan anotherdivmemiliki padding-left: 20px. Saya mendapatkan hal yang sama, newdivlebarnya adalah 220px.

Bagaimana saya bisa memperbaiki masalah ini?

Tambahkan properti:

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

Catatan: Ini tidak akan berfungsi di Internet Explorer di bawah versi 8.

Letakkan div di newdiv Anda dengan width: autodanmargin-left: 20px

Hapus padding dari newdiv.

Halaman model Kotak W3 memiliki info bagus.

Coba ini

box-sizing: border-box;

Jika Anda ingin membuat indentasi teks dalam div tanpa mengubah ukuran div gunakan CSS text-indentsebagai gantinya padding-left.

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

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

<br>

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

cukup tambahkan box-sizing: border-box;

ketika saya menambahkan properti padding-left, lebar DIV berubah menjadi 220px

Ya, itu persis sesuai dengan standar. Begitulah seharusnya bekerja.

Katakanlah saya membuat DIV lain bernama anotherdiv persis sama dengan newdiv, dan meletakkannya di dalam newdiv tetapi newdiv tidak memiliki padding dan anotherdiv memiliki padding-left: 20px. Saya mendapatkan hal yang sama, lebar newdiv akan menjadi 220px;

Tidak, newdiv akan tetap memiliki lebar 200px.

ubah saja lebar div Anda menjadi 160px jika Anda memiliki padding 20px itu menambah 40px ekstra untuk lebar div Anda sehingga Anda perlu mengurangi 40px dari lebar untuk menjaga div Anda terlihat normal dan tidak terdistorsi dengan lebar tambahan di atasnya dan teks Anda semua kacau.