Hàm CSS calc() cho phép bạn áp dụng các phép toán cơ bản trên giá trị độ dài:
- Cộng
+ - Trừ
- - Nhân
* - Chia
/
Ví dụ, giả sử bạn muốn dùng chiều rộng phần trăm 100% trên phần tử, nhưng muốn dành riêng tổng 32px chiều rộng trên cùng phần tử đó. Đây là cách làm với calc():
div { max-width: calc(100% - 32px); }Bây giờ phần tử đó sẽ chiếm 100% container nó nằm trong, trừ 32px.
Kết quả:
100% - 32px
Điều này hữu ích khi bạn cần làm việc với phần trăm chính xác và giá trị pixel cùng lúc trên UI.
Bạn cũng có thể dễ dàng căn giữa phần tử trong container:
div { max-width: calc(100% - 32px); margin-left: auto; margin-right: auto; }Kết quả:
100% - 32px, căn giữa
Bây giờ phần tử căn giữa có chính xác 16px khoảng cách trái và phải. Như bạn thấy, bạn có thể dùng calc() thay thế cho padding hoặc margin khi thêm khoảng cách giữa các phần tử.