10 CSS Calc

CSS calc() performs simple calculations to determine CSS property values. The calc() function allows mathematical expressions with addition ( + ), subtraction ( – ), multiplication ( * ), and division ( / ) to be used to create a value. A useful feature of this function is the ability to mix percentages and absolute values or to mix different units. Pixels can be subtracted from percentages and viewport widths can be added to pixels, for example.

CSS calc() can be used anywhere there’s a css length or number in your stylesheet. .item { width: calc(100% - 60px);} Notice that the operator has a space on either side. That is a requirement for + and - . Leaving it out renders the calculation void. Dividing by 0 voids the result as well.

CSS Tricks has a Complete Guide to Calc

For those of you that are mathematically inclined, calculate sine, cosine, tangent. Check out this trig functions in CSS article.

CSS Code View

using calc to change text size

Comments are closed.