ฉันจะป้องกันคุณสมบัติการขยายจากการเปลี่ยนความกว้างหรือความสูงใน 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+ */

หมายเหตุ:สิ่งนี้จะไม่ทำงานใน Internet Explorer ด้านล่างเวอร์ชั่น 8

ใส่ div ใน newdiv ของคุณด้วยwidth: autoและmargin-left: 20px

ลบการขยายจาก newdiv

หน้าโมเดล W3 Box มีข้อมูลที่ดี

ลองสิ่งนี้

box-sizing: border-box;

หากคุณต้องการที่จะเยื้องข้อความภายใน div โดยไม่ต้องเปลี่ยนขนาดของ div ที่ใช้ใน CSS แทนtext-indentpadding-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

ใช่ว่าเป็นไปตามมาตรฐาน นั่นเป็นวิธีที่มันควรจะทำงาน

สมมติว่าฉันสร้างอีก DIV ชื่อ Anotherdiv เหมือนกับ newdiv และวางไว้ข้างใน newdiv แต่ newdiv ไม่มีช่องว่างภายในและ Anotherdiv มีช่องว่างด้านซ้าย: 20px ฉันได้สิ่งเดียวกันความกว้างของ newdiv จะเท่ากับ 220px;

ไม่ newdiv จะยังคงกว้าง 200px

เพียงแค่เปลี่ยนความกว้าง div ของคุณเป็น 160px หากคุณมี padding ที่ 20px มันจะเพิ่มความกว้างของ div ของคุณ 40px ดังนั้นคุณต้องลบ 40px ออกจากความกว้างเพื่อให้ div ของคุณดูปกติและไม่บิดเบี้ยวด้วยความกว้างที่เพิ่มขึ้น ข้อความของคุณทั้งหมดสับสน