Page 182 - CSS

Chapter 27: Functions

Syntax

• <calc()> = calc( <calc-sum> )
• <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
• <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*
• <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

Remarks

For calc(), white space is required around the "-" and "+" operators, but not the "*" or "/"
operators.

All units must be of the same type; trying to multiply a height by a time duration, for example, is
invalid.

Examples

calc() function

Accepts a mathematical expression and returns a numerical value.

It is especially useful when working with different types of units (e.g. subtracting a px value from a
percentage) to calculate the value of an attribute.

+, -, /, and * operators can all be used, and parentheses can be added to specify the order of
operations if necessary.

Use calc() to calculate the width of a div element:

#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;
}

Use calc() to determine the position of a background-image:

background-position: calc(50% + 17px) calc(50% + 10px), 50% 50%;

Use calc() to determine the height of an element:

https://riptutorial.com/ 160