From e113fe279bbd884addd46a558b88518f76a4b30f Mon Sep 17 00:00:00 2001 From: Sideways S Date: Mon, 27 Nov 2023 12:30:37 -0600 Subject: [PATCH] CSS calc(): clarify units usage (#30457) * Clarify units usage * Update files/en-us/web/css/calc/index.md Co-authored-by: Dipika Bhattacharya * Update files/en-us/web/css/calc/index.md Co-authored-by: Dipika Bhattacharya * Update files/en-us/web/css/calc/index.md Co-authored-by: Dipika Bhattacharya * more clarity * more clarity * use glossary macro --------- Co-authored-by: Sideways S Co-authored-by: Dipika Bhattacharya --- files/en-us/web/css/calc/index.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/files/en-us/web/css/calc/index.md b/files/en-us/web/css/calc/index.md index 4959b6822ff3c17..af03ed97eb88c13 100644 --- a/files/en-us/web/css/calc/index.md +++ b/files/en-us/web/css/calc/index.md @@ -18,18 +18,18 @@ The **`calc()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_F width: calc(100% - 80px); ``` -The `calc()` function takes a single expression as its parameter, with the expression's result used as the value. The expression can be any simple expression combining the following operators, using standard [operator precedence rules](/en-US/docs/Learn/JavaScript/First_steps/Math#operator_precedence): +The `calc()` function takes a single expression as its parameter, and the expression's result is used as the value for a CSS property. In this expression, the {{Glossary("operand", "operands")}} can be combined using the {{Glossary("operator", "operators")}} listed below. When the expression contains multiple operands,`calc()` uses the standard [operator precedence rules](/en-US/docs/Learn/JavaScript/First_steps/Math#operator_precedence): - `+` - - : Addition. + - : Adds the specified operands. - `-` - - : Subtraction. + - : Subtracts the second operand from the first operand. - `*` - - : Multiplication. At least one of the arguments must be a {{cssxref("<number>")}}. + - : Multiplies the specified operands. At least one of the operands must be a {{cssxref("<number>")}}. - `/` - - : Division. The right-hand side must be a {{cssxref("<number>")}}. + - : Divides the left-side operand (dividend) by the right-side operand (divisor). The right-hand operand, the divisor, must be a {{cssxref("<number>")}}. -The operands in the expression may be any {{cssxref("<length>")}} syntax value. You can use different units for each value in your expression, if you wish. You may also use parentheses to establish computation order when needed. +All operands, except those of type {{cssxref("<number>")}}, must be suffixed with an appropriate unit string, such as `px`, `em`, or `%`. You can use a different unit with each each operand in your expression. You may also use parentheses to establish computation order when needed. ### Notes