CSS calc() function ให้คุณทำ basic math operations บน length values ได้:
- บวก
+ - ลบ
- - คูณ
* - หาร
/
ตัวอย่าง สมมติคุณอยากใช้ percentage width 100% บน element แต่ต้องการ reserve 32px width ทั้งหมดบน element เดียวกัน นี่คือวิธีทำด้วย calc():
div {
max-width: calc(100% - 32px);
}ตอนนี้ element นั้นจะใช้พื้นที่ 100% ของ container ที่มันอยู่ ลบ 32px
Result: 100% - 32px
นี่มีประโยชน์เมื่อคุณต้องทำงานกับ exact percentage และ pixel amounts พร้อมกันบน UI
คุณยังสามารถ center align element ภายใน container ได้ง่าย:
div {
max-width: calc(100% - 32px);
margin-left: auto;
margin-right: auto;
}Result: 100% - 32px, center aligned
ตอนนี้ element ที่ center-aligned มี spacing 16px ด้านซ้ายและขวาอย่างแน่นอน คุณสามารถใช้ calc() แทน padding หรือ margin เมื่อเพิ่ม spacing ระหว่าง elements
