ขนาดกล่อง CSS
ขนาดกล่อง CSS
คุณสมบัติ CSS box-sizing
ช่วยให้เราสามารถใส่ช่องว่างภายในและเส้นขอบในความกว้างและความสูงทั้งหมดขององค์ประกอบ
ไม่มี CSS box-sizing Property
ตามค่าเริ่มต้น ความกว้างและความสูงขององค์ประกอบจะคำนวณดังนี้:
width + padding + border = ความกว้างที่แท้จริงขององค์ประกอบ
ความสูง + padding + border = ความสูงที่แท้จริงขององค์ประกอบ
ซึ่งหมายความว่า: เมื่อคุณกำหนดความกว้าง/ความสูงขององค์ประกอบ องค์ประกอบมักจะปรากฏใหญ่กว่าที่คุณกำหนด (เนื่องจากเส้นขอบและช่องว่างภายในขององค์ประกอบถูกเพิ่มเข้ากับความกว้าง/ความสูงที่ระบุขององค์ประกอบ)
ภาพประกอบต่อไปนี้แสดงสอง <div> องค์ประกอบที่มีความกว้างและความสูงที่ระบุเหมือนกัน:
องค์ประกอบ <div> สองรายการด้านบนจบลงด้วยขนาดที่แตกต่างกันในผลลัพธ์ (เนื่องจาก div2 มีการระบุช่องว่างภายใน):
ตัวอย่าง
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
คุณสมบัติbox-sizing
ช่วยแก้ปัญหานี้ได้
ด้วย CSS box-sizing Property
คุณสมบัติbox-sizing
นี้ช่วยให้เราสามารถรวมช่องว่างภายในและเส้นขอบในความกว้างและความสูงทั้งหมดขององค์ประกอบ
หากคุณตั้งค่าbox-sizing: border-box;
องค์ประกอบ ช่องว่างภายในและเส้นขอบจะรวมอยู่ในความกว้างและความสูง:
นี่คือตัวอย่างเดียวกันกับข้างต้น โดยbox-sizing: border-box;
เพิ่มองค์ประกอบ <div> ทั้งสองรายการ:
ตัวอย่าง
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
เนื่องจากผลลัพธ์ของการใช้box-sizing: border-box;
นั้นดีขึ้นมาก นักพัฒนาหลายคนต้องการให้องค์ประกอบทั้งหมดบนหน้าเว็บของตนทำงานในลักษณะนี้
โค้ดด้านล่างช่วยให้แน่ใจว่าองค์ประกอบทั้งหมดมีขนาดที่เข้าใจง่ายขึ้น เบราว์เซอร์จำนวนมากใช้box-sizing: border-box;
สำหรับองค์ประกอบของฟอร์มจำนวนมากอยู่แล้ว (แต่ไม่ใช่ทั้งหมด ซึ่งเป็นสาเหตุที่ความกว้างของอินพุตและพื้นที่ข้อความดูแตกต่างกัน: 100%;)
การใช้สิ่งนี้กับองค์ประกอบทั้งหมดนั้นปลอดภัยและชาญฉลาด:
ตัวอย่าง
* {
box-sizing: border-box;
}
คุณสมบัติการปรับขนาดกล่อง CSS
Property | Description |
---|---|
box-sizing | Defines how the width and height of an element are calculated: should they include padding and borders, or not |