Patricio Treviño · 14 January, 2019 · 2 min read

Calculating values in css with calc

Syntax

calc(<expression>)

view raw syntax.text hosted with ❤ by GitHub

Option	Description
expression	A mathematical expression, the result of which is used as the value.

Example

      
        <html>
      
          <head>
      
            <style>
      
              .container {
      
                width: calc(100% - 50px);
      
                background-color: #CDEBC4;
      
                color:#6D8B64;
      
                text-align: center;
      
                padding: 25px 0;
      
                margin: 0 auto;
      
              }
      
            </style>
      
          </head>
      
          <body>
      
            <div class="container">
      
              This div has a width of 100% - 50px
      
            </div>
      
          </body>
      
        </html>

view raw example.html hosted with ❤ by GitHub

Output

This div has a width of 100% - 50px

References

calc() (https://developer.mozilla.org/en-US/docs/Web/CSS/calc)

	<html>
	<head>
	<style>
	.container {
	width: calc(100% - 50px);
	background-color: #CDEBC4;
	color:#6D8B64;
	text-align: center;
	padding: 25px 0;
	margin: 0 auto;
	}
	</style>
	</head>
	<body>
	<div class="container">
	This div has a width of 100% - 50px
	</div>
	</body>
	</html>