ฟังก์ชัน CSS calc()

CSS calc() ฟังก์ชันช่วยให้คุณใช้การคำนวณทางคณิตศาสตร์พื้นฐานกับค่าความยาวได้:

• เพิ่ม +
• ลบ -
• คูณ *
• ดิวิชั่น /

ตัวอย่างเช่น สมมติว่าคุณต้องการใช้เปอร์เซ็นต์ความกว้าง 100% ในองค์ประกอบ แต่คุณต้องการสำรองความกว้างทั้งหมด 32px ในองค์ประกอบเดียวกันนั้น นี่คือวิธีการดำเนินการดังกล่าวด้วย calc() :

div {
	max-width: calc(100% - 32px);
}

ตอนนี้องค์ประกอบนั้นจะใช้พื้นที่ 100% ของคอนเทนเนอร์ที่อยู่ภายใน ลบ 32px

ผลลัพธ์:

สิ่งนี้มีประโยชน์เมื่อใดก็ตามที่คุณต้องการทำงานกับเปอร์เซ็นต์และจำนวนพิกเซลที่แน่นอนพร้อมกันบน UI

คุณยังสามารถจัดตำแหน่งองค์ประกอบภายในคอนเทนเนอร์ได้อย่างง่ายดาย:

div {
	max-width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
}

ผลลัพธ์:

ตอนนี้องค์ประกอบที่จัดกึ่งกลางมีระยะห่าง 16px ทางด้านซ้ายและด้านขวาพอดี อย่างที่บอก คุณสามารถใช้ calc() . นี้ได้ แทนการใช้ช่องว่างภายในหรือระยะขอบเมื่อคุณเพิ่มระยะห่างระหว่างองค์ประกอบของคุณ