คุณสมบัติ box-sizing ของ CSS ช่วยให้เราสามารถรวมช่องว่างภายในและเส้นขอบเข้าไปด้วย ความกว้างและความสูงรวมขององค์ประกอบ
ตามค่าเริ่มต้น ความกว้างและความสูงขององค์ประกอบจะถูกคำนวณดังนี้:
width + 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;
} ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>Without box-sizing</h1>
<div class="div1">This div is smaller (width is 300px and height is 100px).</div>
<br>
<div class="div2">This div is bigger (width is also 300px and height is 100px).</div>
</body>
</html>
box-sizing คุณสมบัติแก้ได้ ปัญหานี้.
คุณสมบัติ 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;
} ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
.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;
}
</style>
</head>
<body>
<h1>With box-sizing</h1>
<div class="div1">Both divs are the same size now!</div>
<br>
<div class="div2">Hooray!</div>
</body>
</html>
เนื่องจากผลลัพธ์ของการใช้ box-sizing: border-box; ดีขึ้นมาก นักพัฒนาจำนวนมากต้องการให้องค์ประกอบทั้งหมดบนหน้าเว็บของตนทำงานในลักษณะนี้
โค้ดด้านล่างช่วยให้แน่ใจว่าองค์ประกอบทั้งหมดมีขนาดในลักษณะที่ใช้งานง่ายยิ่งขึ้น เบราว์เซอร์จำนวนมากใช้ box-sizing: border-box; สำหรับองค์ประกอบแบบฟอร์มต่างๆ อยู่แล้ว (แต่ไม่ใช่ทั้งหมด - ซึ่งเป็นเหตุผลว่าทำไมอินพุตและพื้นที่ข้อความจึงดูแตกต่างกันที่ความกว้าง: 100%; ).
การใช้สิ่งนี้กับองค์ประกอบทั้งหมดนั้นปลอดภัยและชาญฉลาด:
* {
box-sizing: border-box;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
* {
box-sizing: border-box;
}
input, textarea {
width: 100%;
}
</style>
</head>
<body>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br>
Comments:<br>
<textarea name="message" rows="5" cols="30">
</textarea>
<br><br>
<input type="submit" value="Submit">
</form>
<p><strong>Tip:</strong> Try to remove the box-sizing property from the style element and look what happens.
Notice that the width of input, textarea, and submit button will go outside of the screen.</p>
</body>
</html>
กำหนดวิธีคำนวณความกว้างและความสูงขององค์ประกอบ: ควร รวมถึงช่องว่างภายในและเส้นขอบด้วยหรือไม่