InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

CSS properties

  • CSS3 flexbox
  • all
  • animation
  • background-color
  • background-image
  • border
  • border-color
  • border-radius
  • border-style
  • border-width
  • bottom
  • box-shadow
  • box-sizing
  • calc function
  • clip
  • color
  • color value currentColor
  • color values
  • cursor
  • float
  • font
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • generated content
  • left
  • letter-spacing
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • outline
  • outline-color
  • outline-style
  • outline-width
  • overflow
  • padding
  • pointer-events
  • position
  • resize
  • right
  • text-align
  • text-decoration
  • text-indent
  • text-overflow
  • text-shadow
  • text-transform
  • top
  • transform
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • visibility
  • white-space
  • word-break
  • word-spacing
  • word-wrap/overflow-wrap
  • z-index
 
  • Home
  • > Tutorials
  • > CSS
  • > CSS properties

CSS calc function for numeric values

on Apr 5, 2016

CSS calc() function allows expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values. It can be used wherever length, frequency, angle, time, number, or integer values are allowed. One can also have calc expression within calc.

calc values

Note that whitespace is required on both sides of the + and – operators. Some valid calc values are

  • calc(100% – 100px)
  • calc(100%/3 – 2*1em – 2*1px)

Fallback value

In case you are using calc function to define a property (say width), it may be a good idea to define a fallback width value in case browser does not support calc function. The fallback value should come before main value.

width: 95%;
width: calc(100% - 100px);

Example – css calc function

In the following code, CSS property width can be changed to the following values
  • 100px
  • calc(100% - 100px)
<style type="text/css">
.box {
  width: 100px;
  height: 100px; background-color:lightgreen;
}
</style>
<div class="box">
  some text
</div>
width refresh done
try it online

Specification and Browser compatibility

SpecificationStatusCategories
calc() as CSS unit valueW3C Candidate RecommendationCSS3
Desktop
ChromeFirefoxIEEdgeSafariOpera
Yes 26+ Yes 16+ Yes 10+ Yes 12+ Yes 6.1+ Yes 15+
Mobile
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 7.0-7.1+ Yes 10+ Yes 33+
source: caniuse.com

Suggested posts:

  1. How to display a div in browser window center
  2. CSS animation-timing-function
  3. Javascript arrow function examples
  4. CSS color values
  5. CSS transition-timing-function
  6. viewport and media queries for mobile browsers – quick introduction
  7. Javascript – implement class using function
  8. Python – How to sort dictionary by values
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged CSS, CSS properties, Tutorials

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2023 InfoHeap.

Powered by WordPress