CSS3 box-sizing Property

ระบุว่า <div> องค์ประกอบที่ควรจะมีช่องว่างภายในและชายแดนรวมอยู่ในความกว้างรวมขององค์ประกอบและความสูง:

div {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}

เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง

ความหมายและการใช้งาน

สถานที่ให้บริการกล่องขนาดจะใช้ในการบอกสิ่งที่เบราว์เซอร์คุณสมบัติการปรับขนาด (width and height) ควรจะรวมถึง

พวกเขาควรจะรวมถึงชายแดนกล่อง? หรือเพียงแค่เนื้อหากล่อง (ซึ่งเป็นค่าเริ่มต้นของความกว้างและความสูงคุณสมบัติ)?

ค่าเริ่มต้น:	content-box
รับการถ่ายทอด:	no
Animatable:	no. Read about animatable
เวอร์ชัน:	CSS3
ไวยากรณ์ javascript:	object .style.boxSizing="border-box" Try it

ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน

ตามด้วยหมายเลข -webkit- หรือ -moz- ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า

คุณสมบัติ
box-sizing	10.0 4.0 -webkit-	8.0	29.0 2.0 -moz-	5.1 3.2 -webkit-	9.5

box-sizing: content-box|border-box|initial|inherit;

ความคุ้มค่า	ลักษณะ
content-box	ค่าเริ่มต้น. ความกว้างและความสูงคุณสมบัติ (and min/max properties) มีเพียงเนื้อหา ชายแดน padding หรือคิดเป็นอัตรานี้ยังไม่รวม
border-box	ความกว้างและความสูงคุณสมบัติ (and min/max properties) รวมถึงเนื้อหาและ padding ชายแดน แต่ไม่ขอบ
initial	การตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น
inherit	สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก