CSS Unit Calculations - HTML CSS CSS

HTML CSS examples for CSS:Length

  1. HOME
  2. HTML CSS
  3. CSS
  4. Length

Introduction

CSS3 lets you calculate units.

You use the calc keyword and parentheses to encompass a calculation.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style type="text/css">
            p {<!--   w  w w  . j av a2s  .  co  m-->
                background: grey;
                color:white;
                font-size: 20pt;
                width: calc(80% - 20px);
            }
        </style>
    </head>
    <body>
        <a href="http://java2s.com">Website</a>
        <p>I like <span>CSS</span> and HTML.</p>
        <a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
    </body>
</html>

Related Tutorials