Box-Sizing: Content-Box เทียบกับ Border-Box
ทำความเข้าใจว่า box-sizing เปลี่ยนวิธีคำนวณ width และ height ที่รวม padding กับ border อย่างไร
Box-Sizing: Content-Box เทียบกับ Border-Box เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
ปัญหาของการคำนวณขนาดกล่อง
ตามค่าเริ่มต้น CSS จะกำหนด width ให้กับ พื้นที่เนื้อหาเท่านั้น เมื่อเพิ่มระยะห่างภายในหรือเส้นขอบ ขนาดที่แสดงผลจริงขององค์ประกอบจะเพิ่มขึ้นด้วย ซึ่งทำให้สับสนและเกิดข้อผิดพลาดได้ง่าย
<div class="box">200px + padding + border = 244px rendered</div>
content-box (ค่าเริ่มต้น)
box-sizing: content-box เป็นค่าเริ่มต้น โดย width และ height มีผลกับเนื้อหาเท่านั้น ระยะห่างด้านในและเส้นขอบจะถูกเพิ่มเข้ามาภายนอก ทำให้องค์ประกอบมีขนาดใหญ่กว่าขนาดที่กำหนดไว้
border-box
เมื่อใช้ box-sizing: border-box ค่า width และ height จะรวมเนื้อหา + ระยะห่างด้านใน + เส้นขอบ ไว้ด้วย องค์ประกอบจะมีขนาดตรงตามที่ประกาศไว้พอดี ไม่ว่าระยะห่างด้านในหรือเส้นขอบจะมีขนาดเท่าใด
<div class="box">Exactly 200px rendered width</div>
การรีเซ็ต border-box สำหรับทุกองค์ประกอบ
ใช้ border-box กับองค์ประกอบทั้งหมดด้วยการรีเซ็ตที่แนะนำให้ใช้โดยทั่วไปดังนี้:
<div class="demo-box">Width stays exactly 200px</div>
เหตุใดจึงใช้ inherit แทน *
รูปแบบทางเลือกนี้เปิดโอกาสให้คอมโพเนนต์เปลี่ยนการตั้งค่า box-sizing ได้หากจำเป็น:
<div class="demo-box">Inherited border-box sizing</div>
ความกว้างแบบเปอร์เซ็นต์ + ระยะห่างด้านใน
ประโยชน์ในทางปฏิบัติที่สำคัญของ border-box คือการใช้กับความกว้างแบบเปอร์เซ็นต์ องค์ประกอบที่มี width: 50% และมีระยะห่างด้านใน 20px จะยังคงมีขนาดเท่ากับ 50% ขององค์ประกอบแม่พอดี โดยไม่ล้นออกมา
<div class="col">50% wide column with padding, no overflow</div>
border-box ไม่รวม margin
แม้จะใช้ border-box แล้วระยะขอบก็ไม่รวมอยู่ด้วยในความกว้างที่ประกาศไว้ ระยะขอบจะเพิ่มพื้นที่ด้านนอกองค์ประกอบเหนือขนาดที่กำหนดไว้เสมอ
ประวัติ: เหตุใด content-box จึงเป็นค่าเริ่มต้น
ในอดีต เบราว์เซอร์มีความเห็นไม่ตรงกันเกี่ยวกับโมเดลกล่อง W3C กำหนดมาตรฐานให้ใช้ content-box แต่ IE ใช้ border-box CSS สมัยใหม่จึงใช้ content-box เป็นค่าเริ่มต้นเพื่อให้สอดคล้องกับมาตรฐาน W3C อย่างไรก็ตาม แทบทุกโครงการจะเปลี่ยนไปใช้ border-box
การตรวจสอบโมเดลกล่องใน DevTools
ใน Chrome DevTools แผงองค์ประกอบจะแสดงแผนภาพโมเดลกล่องพร้อมขนาดที่แน่นอนของเนื้อหา ระยะห่างด้านใน เส้นขอบ และระยะขอบ วิธีนี้เป็นวิธีที่รวดเร็วที่สุดในการแก้ไขปัญหาการกำหนดขนาด
Grid และ Flexbox ใช้ border-box ภายใน
CSS Grid และ Flexbox จะกำหนดขนาดของแทร็กและรายการโดยใช้หลักการของ border-box เสมอ ไม่ว่าการตั้งค่า box-sizing ขององค์ประกอบนั้นจะเป็นอย่างไร จึงทำให้การคำนวณขนาดคาดเดาได้ง่าย
min/max กับ border-box
min-width, max-width, min-height และ max-height ทำงานในลักษณะเดียวกับ width กล่าวคือจะรวมระยะห่างด้านในและเส้นขอบเมื่อเปิดใช้ border-box
ตรวจสอบอย่างรวดเร็ว
เมื่อใช้ box-sizing: border-box องค์ประกอบที่ประกาศเป็น width: 300px; padding: 30px; จะมีความกว้างของพื้นที่เนื้อหาเท่าใด:
สรุปทบทวน
box-sizing: border-box จะรวมระยะห่างด้านในและเส้นขอบไว้ในความกว้างที่ประกาศ จึงป้องกันไม่ให้ขนาดขยายขึ้นโดยไม่คาดคิด ให้ใช้กับองค์ประกอบทั้งหมดด้วย *, *::before, *::after { box-sizing: border-box } ระยะขอบจะไม่ถูกรวมอยู่ในโมเดลกล่องทั้งสองแบบ
คำถามที่พบบ่อย
บทเรียน “Box-Sizing: Content-Box เทียบกับ Border-Box” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “Box-Sizing: Content-Box เทียบกับ Border-Box” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “Box-Sizing: Content-Box เทียบกับ Border-Box”
ทำความเข้าใจว่า box-sizing เปลี่ยนวิธีคำนวณ width และ height ที่รวม padding กับ border อย่างไร คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “Box-Sizing: Content-Box เทียบกับ Border-Box” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ทำความเข้าใจ Width Height Margin และ Padding
- รูปแบบ ความกว้าง และสีเส้นขอบ
- Box-Sizing: Content-Box เทียบกับ Border-Box
- เส้นกรอบและเงากล่อง