Even if calc() worked in that context, it would be the wrong thing to use, because the viewport width could be between 40rem and 40rem + 1px (e.g. I used it to create a full-bleed utility class: .full-bleed { width: 100vw; margin-left: calc(50% - 50vw); } I’d say calc() is in my top 3 CSS things. なんと calc(100% / 3);と書くだけで、100%を3で割ってくれるわけです! つまり、100%÷3。 こんなことができていいの・・ありがとう・・これをCSSに指定するだけなのです。 他にも、四則計算ができるので、+や-処理もできます。 Almost every example above has already done this, but just to put a point on it, here it is mixing different units: That’s saying: As wide as the element is, minus 20 pixels. 640.5px on a 2× display with 16px base font size). Not just the font-size, but line-height too. I can’t say I fully understand it, but for example, 2px-3px is parsed as the number “2” and the unit “px-3px”, which isn’t doing anybody any good, and the + has other issues like getting “consumed by the number syntax.” I would have guessed the whitespace would have had to do with the -- syntax of custom properties, but nope! If you really needed to support super far back (e.g. This comment thread is closed. That means this works: I mention this because it might be tempting to try to pull a number in that way to use in a calculation, like: Fortunately, it doesn’t matter much because custom properties in the HTML are just as useful or more! for local development. つまり、100%÷3。 If you have important information to share, please, A two-up grid that breaks into a single column, https://github.com/w3c/csswg-drafts/issues/1026. Finding out that calc() can be used in sizes has really changed the world to me. This is perhaps the most valuable feature of calc()! For example, say you need to calculate exactly 1⁄7th the width of an element…. 例).sample{width: calc(100% + 50px);}, 「 - 」減算(引き算) But…. Similarly to attr() you also cannot use counter() inside calc() (or outside of content), see https://github.com/w3c/csswg-drafts/issues/1026. But the point is that it has to be done in the browser (at “runtime”) when you mix units in this way, which is most of the value of calc(). Invalid values invalidate the whole individual declaration. you really need to do the addition or subtraction first), you’ll need parens. (See how Splitting.js adds indexes to words/characters as an example.). I also But there is a smidge of overlap. 100vw - 250px provides you with 250px less than the screen width, for example. I've used WordPress since day one all the way up to v17, CSS has a special calc() function for doing basic math. I used it to make some images overflow their container on an article page. You can even do line breaks if you’d like: Careful about this, though: no spaces between calc() and the opening paren. For the non-functional @media (min-width: calc(40rem + 1px)) concept, use @media not all and (max-width: 40rem) instead.Even if calc() worked in that context, it would be the wrong thing to use, because the viewport width could be between 40rem and 40rem + 1px (e.g. Other than the amazing ability of calc() to mix units, the next most awesome thing about calc() is using it with custom properties. like multiplying and dividing must be with unit-less numbers). I heavily use calc() in the sizes attribute of responsive and (there: ) images.