Relawan kami belum menerjemahkan artikel ini ke bahasa Bahasa Indonesia. Bergabunglah dan bantu kami menyelesaikannya!
Anda juga dapat membaca artikel ini dalam English (US).

The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage><number>, or <integer> is allowed.

/* property: calc(expression) */
width: calc(100% - 80px);

Syntax

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:

+
Addition.
-
Subtraction.
*
Multiplication. At least one of the arguments must be a <number>.
/
Division. The right-hand side must be a <number>.

The operands in the expression may be any <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.

Notes

  • Division by zero results in an error being generated by the HTML parser.
  • The + and - operators must be surrounded by whitespace. For instance, calc(50% -8px) will be parsed as a percentage followed by a negative length — an invalid expression — while calc(50% - 8px) is a percentage followed by a subtraction operator and a length. Likewise, calc(8px + -50%) is treated as a length followed by an addition operator and a negative percentage.
  • The * and / operators do not require whitespace, but adding it for consistency is both allowed and recommended.
  • Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if auto had been specified.
  • It is permitted to nest calc() functions, in which case the inner ones are treated as simple parentheses.

Formal syntax

calc( <calc-sum> )

where
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*

where
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*

where
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

Examples

Positioning an object on screen with a margin

calc() makes it easy to position an object with a set margin. In this example, the CSS creates a banner that stretches across the window, with a 40-pixel gap between both sides of the banner and the edges of the window:

.banner {
  position: absolute;
  left: 40px;
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
}
<div class="banner">This is a banner!</div>

Automatically sizing form fields to fit their container

Another use case for calc() is to help ensure that form fields fit in the available space, without extruding past the edge of their container, while maintaining an appropriate margin.

Let's look at some CSS:

input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);
}

#formbox {
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}

Here, the form itself is established to use 1/6 of the available window width. Then, to ensure that input fields retain an appropriate size, we use calc() again to establish that they should be the width of their container minus 1em. Then, the following HTML makes use of this CSS:

<form>
  <div id="formbox">
  <label>Type something:</label>
  <input type="text">
  </div>
</form>

Nested calc() with CSS Variables

You can also use calc() with CSS variables. Consider the following code:

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

After all variables are expanded, widthC's value will be calc( calc( 100px / 2) / 2), then when it's assigned to .foo's width property, all inner calc()s (no matter how deeply nested) will be flattened to just parentheses, so the width property's value will be eventually calc( ( 100px / 2) / 2), i.e. 25px. In short: a calc() inside of a calc() is identical to just parentheses.

Accessibility concerns

When calc() is used for controlling text size, be sure that one of the values includes a relative length unit, for example:

h1 {
  font-size: calc(1.5rem + 3vw);
}

This ensures that text size will scale if the page is zoomed.

Specifications

Specification Status Comment
CSS Values and Units Module Level 3
The definition of 'calc()' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 26
Full support 26
Full support 19
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Full support YesFirefox Full support 16
Notes
Full support 16
Notes
Notes Before Firefox 57 calc(1*2*3) is not parsed successfully.
Notes Firefox 57 increased the number of places calc() could substitute another value. See bug 1350857.
No support 4 — 53
Prefixed
Prefixed Requires the vendor prefix: -moz-
IE Full support 9Opera Full support 15Safari Full support 7
Full support 7
Full support 6
Prefixed
Prefixed Requires the vendor prefix: -webkit-
WebView Android ? Chrome Android Full support 28Edge Mobile Full support YesFirefox Android Full support 16
Notes
Full support 16
Notes
Notes Before Firefox 57 calc(1*2*3) is not parsed successfully.
Notes Firefox 57 increased the number of places calc() could substitute another value. See bug 1350857.
No support 4 — 53
Prefixed
Prefixed Requires the vendor prefix: -moz-
Opera Android Full support 21Safari iOS Full support 7
Full support 7
Full support 6
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Samsung Internet Android Full support Yes
Gradient color stops supportChrome Full support 19Edge Full support YesFirefox Full support 19IE Full support 9Opera ? Safari Full support 6WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 19Opera Android ? Safari iOS ? Samsung Internet Android ?
Nested calc() supportChrome Full support 51Edge ? Firefox Full support 48IE ? Opera ? Safari ? WebView Android ? Chrome Android Full support 51Edge Mobile ? Firefox Android Full support 48Opera Android ? Safari iOS ? Samsung Internet Android Full support 5.0
<number> value supportChrome ? Edge ? Firefox Full support 48IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 48Opera Android ? Safari iOS ? Samsung Internet Android ?
<color> value supportChrome ? Edge ? Firefox Full support 59IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 59Opera Android ? Safari iOS ? Samsung Internet Android ?
Media query value supportChrome Full support 66Edge No support NoFirefox Full support 59IE No support NoOpera Full support 53Safari No support NoWebView Android No support NoChrome Android Full support 66Edge Mobile No support NoFirefox Android No support NoOpera Android Full support 53Safari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also