Hàm calc () CSS

CSS calc() hàm cho phép bạn áp dụng các phép toán cơ bản trên các giá trị độ dài:

• Thêm +
• Trừ -
• Nhân *
• Bộ phận /

Ví dụ:giả sử bạn muốn sử dụng phần trăm chiều rộng 100% trên một phần tử, nhưng bạn muốn đặt trước tổng chiều rộng 32px trên cùng một phần tử đó. Dưới đây là cách thực hiện điều đó với calc() :

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

Bây giờ phần tử đó sẽ chiếm 100% bất kỳ vùng chứa nào mà nó nằm bên trong, trừ đi 32px.

Kết quả:

Điều này hữu ích bất cứ khi nào bạn cần làm việc với tỷ lệ phần trăm và số lượng pixel chính xác cùng một lúc trên giao diện người dùng.

Bạn cũng có thể dễ dàng căn giữa phần tử bên trong vùng chứa của nó:

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

Kết quả:

Bây giờ phần tử căn giữa có khoảng cách chính xác là 16px ở bên trái và bên phải. Như bạn có thể nói, bạn có thể sử dụng calc() này để thay thế cho việc sử dụng đệm hoặc lề khi bạn thêm khoảng cách giữa các phần tử của mình.