Làm cách nào để ngăn thuộc tính đệm thay đổi chiều rộng hoặc chiều cao trong CSS?

Tôi đang tạo một trang web với DIVs. Mọi thứ đều ổn, trừ khi tôi tạo DIV. Tôi tạo chúng như thế này (ví dụ):

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

Khi tôi thêm thuộc padding-lefttính, chiều rộng của các DIVthay đổi thành 220px và tôi muốn nó giữ nguyên ở mức 200px.

Giả sử tôi tạo một DIVtên khác anotherdivgiống hệt như newdivvà đặt nó vào trong newdivnhưng newdivkhông có phần đệm và anotherdivcó padding-left: 20px. Tôi nhận được điều tương tự, newdivchiều rộng của nó sẽ là 220px.

Làm thế nào tôi có thể khắc phục vấn đề này?

Thêm tài sản:

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

Lưu ý: Điều này sẽ không hoạt động trong Internet Explorer bên dưới phiên bản 8.

Đặt một div trong newdiv của bạn với width: autovàmargin-left: 20px

Hủy bỏ phần đệm từ newdiv.

Trang mô hình W3 Box có thông tin tốt.

Thử cái này

box-sizing: border-box;

Nếu bạn muốn thụt lề văn bản trong div mà không thay đổi kích thước của div, hãy sử dụng CSS text-indentthay vì padding-left.

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

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

<br>

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

chỉ cần thêm box-sizing: border-box;

Khi tôi thêm thuộc tính đệm bên trái, chiều rộng của DIV thay đổi thành 220px

Vâng, đó là chính xác theo các tiêu chuẩn. Đó là cách nó hoạt động.

Giả sử tôi tạo một DIV khác có tên khác giống hệt newdiv và đặt nó vào bên trong newdiv nhưng newdiv không có phần đệm và otherdiv có phần đệm-left: 20px. Tôi nhận được điều tương tự, chiều rộng của newdiv sẽ là 220px;

Không, newdiv sẽ vẫn rộng 200px.

chỉ cần thay đổi chiều rộng div của bạn thành 160px nếu bạn có phần đệm 20px, nó tăng thêm 40px cho chiều rộng của div, do đó bạn cần trừ 40px khỏi chiều rộng để giữ cho div của bạn trông bình thường và không bị biến dạng với chiều rộng thêm trên đó và văn bản của bạn tất cả rối tung lên.