CSS Box Sizing Property: ควบคุมขนาด Element

เรียนรู้วิธีใช้ CSS box-sizing property เพื่อควบคุมว่า browser คำนวณและ render width และ height ของ HTML elements ยังไง

box-sizing (content-box vs border-box)

CSS box-sizing property มี 2 ค่า:

• content-box (default)
• border-box

ทั้งสองค่า box-sizing ส่งผลต่อวิธีที่ browser คำนวณและ render ขนาด HTML elements แต่นั่นคือสิ่งเดียวที่พวกมันเหมือนกัน

content-box

โดย default ทุก HTML elements ใช้ค่า content-box:

box-sizing: content-box;

หมายความว่าหากคุณมี element ด้วย styles ต่อไปนี้:

div {
    width: 100px;
    height: 100px;
    padding: 16px;
    border: 1px solid;
}

Width และ height ของ element นั้นจะคำนวณเป็น 134px ไม่ใช่ 100px ตามที่ระบุใน CSS stylesheet Result:

หากต้องการเช็คขนาดเอง เปิด Element Inspector ของ browser:

• Mac: Cmd + Shift + C
• Windows: Ctrl + Shift + C

แล้ววางเมาส์เหนือ element ด้านบนเพื่อดูขนาด

สิ่งนี้เกิดเพราะ content-box รวม width/height values กับ border (1px แต่ละด้าน) และ padding (16px แต่ละด้าน) และ render element size ที่ผลรวมของค่าเหล่านี้:

• Element width: 1 + 16 + 100 + 16 + 1 = 134 pixels
• Element height: 1 + 16 + 100 + 16 + 1 = 134 pixels

Default behavior จาก content-box นี้ค่อนข้างรบกวน แต่โชคดีที่เปลี่ยนได้ง่าย!

Default box-sizing: content-box declaration สืบทอดมาจาก User Agent Stylesheet ที่ built-in ในทุก web browsers

border-box ช่วยชีวิต

คุณสามารถ override content-box ด้วยค่า border-box ซึ่งมีผลตรงข้ามกับวิธี browser คำนวณขนาด elements:

box-sizing: border-box;

ด้วยการตั้งค่า box-sizing property เป็น border-box browser จะ render elements ที่ width และ height ที่คุณระบุบน element ด้วย properties height และ width อย่างแม่นยำ:

div {
    width: 100px;
    height: 100px;
    padding: 16px;
    border: 1px solid;
    box-sizing: border-box;
}

Result:

border-box value ทำให้ browser include (ไม่ใช่ add) padding และ border values ที่ระบุ เมื่อคำนวณ total width และ height ของ element

ด้วย border-box ไม่ว่าคุณจะเพิ่ม padding หรือ border value ใดๆ ให้ element ขนาดรวมของ element จะเป็นค่าที่คุณระบุบน height และ width properties

Side-by-side comparison:

ทั้งสอง elements มี width และ height ระบุ 100 pixels แต่ element ที่ 2 เท่านั้นที่เคารพค่าเหล่านั้นเพราะใช้ border-box

content-box vs border-box สรุป:

• content-box รวม padding และ border values กับ element height/width values และ render total
• border-box include padding และ border values เป็นส่วนหนึ่งของ element width/height

ใช้ border-box บนทุกอย่าง

ตอนนี้คุณรู้ว่า border-box ทำให้ browsers render HTML elements ที่ actual size ที่คุณระบุใน CSS แต่จะ apply border-box บน HTML elements ทั้งหมดยังไง?

ง่ายเท่าการเพิ่ม CSS rule-set ต่อไปนี้ที่ ด้านบนสุด ของ stylesheet:

*, *:before, *:after {
    box-sizing: border-box;
}

โค้ดด้านบนใช้ CSS universal selector * เพื่อ apply border-box value ให้ box-sizing property บน:

• All normal element selectors (div, p, button, etc.)
• All :before และ :after pseudo selectors

ด้วยการใช้ border-box บน HTML elements ทั้งหมด คุณไม่ต้องกังวลอีกต่อไปว่า browser จะ render ขนาด elements ยังไง มันจะเป็น height และ width ที่คุณระบุเองเสมอ