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>

Click to view the demo

You use the calc keyword and parentheses to encompass a calculation. You can mix other units and perform basic arithmetics.





















Home »
  HTML CSS »
    CSS »




CSS Introduction
CSS Background
CSS Border
CSS Box Layout
CSS Text
CSS Font
CSS Form
CSS List
CSS Selectors
CSS Others
CSS Table