calc()

div.hoge{
	width: 200px; /* Fallback for browsers that don't support calc() */
	width: calc(300px - 100xp);
	width: -webkit-calc(300px - 100xp); /* For older Chrome and Safari */
}

Value	Description
+	Performs addition.
-	Performs subtraction.
*	Performs multiplication. Note that one of the arguments must be a 'number' (unitless).
/	Performs division. Note that the right-hand argument must be a 'number' (unitless).

<div style="width: calc(300px - 100xp); width: -webkit-calc(300px - 100xp); background: #f00;">This is a div element. The width is set to the result of '300px - 100px', which is '200px'.</div>

※ Version data based on MDN / Can I Use.

※ Android 4.x is supported from 4.4 onwards, so versions 4.3 and earlier cannot use it.

Using 'calc()' allows you to perform arithmetic (calculations).

The values that 'calc()' can calculate include 'length', 'angle', 'time', 'integer', and 'frequency' (although frequency was removed in CSS 2.1).

<div class="nagasa">This is a div element. The width is set to the result of '300px - 100px', which is '200px'.</div>
<div class="kakudo">This is a div element. The angle is set to the result of '50deg - 40deg', which is '10deg'.</div>
<div class="jikan">This is a div element. The animation duration is set to the result of '5s - 3s', which is '2s'.</div>

/* Sets the width to the result of '300px - 100px' = '200px'. */
div.nagasa{
	width: calc(300px - 100xp);
	width: -webkit-calc(300px - 100xp);
	background: #F00;
}
/* Sets the angle to the result of '50deg - 40deg' = '10deg'. */
div.kakudo{
	width: 200px;
	background: #FF0;
	margin:40px 0;
	transform: rotate(calc(50deg - 40deg));
	-moz-transform: rotate(calc(50deg - 40deg));
	-ms-transform: rotate(calc(50deg - 40deg));
	-webkit-transform: rotate(-webkit-calc(50deg - 40deg));
}
/* Sets the duration to the result of '5s - 3s' = '2s'. */
div.jikan{
	width:200px;
	background: #0F0;
	-webkit-animation:hoge -webkit-calc(5s - 3s) infinite alternate;
	-moz-animation:hoge calc(5s - 3s) infinite alternate;
	animation:hoge calc(5s - 3s) infinite alternate;
}
@-webkitkeyframes hoge { 0%{margin-left:0px;} 100%{margin-left:50px;}}
@-mozkeyframes hoge { 0%{margin-left:0px;} 100%{margin-left:50px;}}
@keyframes hoge { 0%{margin-left:0px;} 100%{margin-left:50px;}}

Calculations that do not divide evenly, such as '100 ÷ 3', can also be computed.

<div style="width:33.33%; width:calc(100% / 3); width:-webkit-calc(100% / 3); background: #f00;">This is a div element. The width is set to the result of '100% ÷ 3'.</div>

Units other than 'px' and '%' such as 'em' and 'cm' can be used, and you can even mix different units in the same calculation. Also, 'calc()' can be nested inside another 'calc()'.

<div style="width: calc(100% - calc(10px + 10px)); width: -webkit-calc(100% - calc(10px + 10px)); background: #f00;">This is a div element. The width is set to the result of 'calc(100% - calc(10px + 10px))'.</div>