CSS Unit Calculations
Description
CSS3 lets you calculate units.
This is a flexible approach that gives you both control and precision when you create styles.
Example
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {<!-- w ww. j av a 2s. c om-->
background: grey;
color:white;
font-size: 20pt;
width: calc(80% - 20px);
}
</style>
</head>
<body>
<p>this is a test.</p>
</body>
</html>
You use the calc
keyword and parentheses to encompass a calculation.
You can mix other units and perform basic arithmetics.