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

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

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

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

ไวยากรณ์

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

ค่า

ค่า	คำอธิบาย
`content-box`	ทั้ง `padding` และ `border` ทำให้บล็อกขยายออก
`border-box`	ทั้ง `padding` และ `border` ไม่ทำให้บล็อกขยายออก

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

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

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

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

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

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

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

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

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

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

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

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

#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 ตอนนี้ขนาด ขององค์ประกอบแรกและองค์ประกอบที่สองจะเท่ากัน:

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

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

ดูเพิ่มเติม

คุณสมบัติ outline,
ซึ่งสร้างเส้นขอบที่ไม่ได้ทำให้องค์ประกอบขยายออก