คุณสมบัติ box-sizing

คุณสมบัติ box-sizing ช่วยให้สามารถเปลี่ยน วิธีการคำนวณขนาดขององค์ประกอบได้

โดยค่าเริ่มต้น การเพิ่ม padding จะทำให้องค์ประกอบขยายออก: หากเรากำหนดความกว้าง width เป็น 100px และ padding-left เป็น 20px ความกว้างจริงขององค์ประกอบ จะกลายเป็น 120px

และหากเรากำหนด border-left เพิ่มอีก 10px ความกว้างจริงขององค์ประกอบ จะกลายเป็น 130px นั่นคือ padding และ border ทำให้บล็อกขยายออก (ทั้งความกว้างและความสูง) พฤติกรรมนี้สามารถเปลี่ยนได้โดยใช้ box-sizing

ไวยากรณ์

cssตัวเลือก {
  box-sizing: content-box | border-box;
}

ค่า

ค่าเริ่มต้น: content-box

ตัวอย่าง . พฤติกรรมมาตรฐาน

ตอนนี้บล็อกทั้งสองมีความสูง และความกว้างเท่ากัน แต่บล็อกที่สองมี padding ที่กำหนด ในขณะที่บล็อกแรกไม่มี ดูว่าขนาดของพวกมัน แตกต่างกันอย่างไร:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  margin-bottom: 10px;
  background: #f1f1f1;
}
#elem2 {
  padding: 50px;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

ตัวอย่าง . พฤติกรรมมาตรฐาน

ตอนนี้บล็อกทั้งสองมีความสูง และความกว้างเท่ากัน แต่บล็อกที่สองมีเส้นขอบ ขนาด 10px ในขณะที่บล็อกแรกไม่มี ดูว่า ขนาดของพวกมันแตกต่างกันอย่างไร:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  border: 10px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

ตัวอย่าง . พฤติกรรมมาตรฐาน

ตอนนี้บล็อกที่สองมีทั้ง padding และเส้นขอบ ขนาด 10px:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  padding: 50px;
  border: 20px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

ตัวอย่าง . ค่า border-box

เพิ่มค่า border-box ให้กับองค์ประกอบที่สอง สำหรับคุณสมบัติ box-sizing ตอนนี้ขนาด ขององค์ประกอบแรกและองค์ประกอบที่สองจะเท่ากัน:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  box-sizing: border-box;
  padding: 50px;
  border: 10px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

ดูเพิ่มเติม