Calc()
The CSS calc() function evaluates an arithmetic expression involving compatible CSS values and units to produce a computed value.
Math for Web Design
calc() is a CSS mathematical function that evaluates an arithmetic expression, including compatible units, to produce a computed style value.
- How it is used
- Expresses responsive layout and typography relationships that combine flexible dimensions with fixed offsets.
- How deep it goes
- Explains runtime unit resolution, arithmetic syntax, compatible types, precedence, and nested CSS math functions.
- Examples
- Demonstrates a viewport-fitting dialog, three-column gutters, padded-container children, and fluid font sizes.
- What you can do after
- Apply it to build responsive dimensions, exact column widths, and fluid font-size formulas in CSS.
Tiny CSS Projects
The CSS calc() function computes a property value from arithmetic expressions involving CSS values and units.
- How it is used
- Uses arithmetic to size card containers and position overlapping images without hard-coding every resulting value.
- How deep it goes
- Explains subtraction, division, multiplication, negative results, and custom-property reuse through two worked card layouts.
- Examples
- Demonstrates card height subtraction, grid rows, image overlap, negative margins, and spacing that prevents clipping on short screens.
- What you can do after
- Apply calc() to build flexible card dimensions and image offsets that respond to available space and reusable size variables.
CSS in Depth, Second Edition
The CSS calc() function computes a value from arithmetic involving CSS values and units.
- How it is used
- Combines responsive viewport sizing with relative units and replaces magic-number dimension adjustments.
- How deep it goes
- Defines four arithmetic operators, explains whitespace requirements, and demonstrates responsive font and variable-based width calculations.
- Examples
- Uses responsive root typography and a column width reduced by its combined horizontal padding.
- What you can do after
- Apply calc() to build smoothly scaling font sizes and derive widths from variables instead of unexplained constants.
Related concepts
- height propertyconfigures · A height property specifies or reports an element’s vertical dimension.
- CSS math functionkind of · A CSS math function is a built-in CSS function that evaluates mathematical values or expressions in style declarations.
- responsive web designuses · Responsive web design is an approach to designing websites whose layouts and presentation adapt to different screen sizes, viewports, and device characteristics.
- line equationimplements · A line equation is an equation linear in its variables that represents a straight line in two dimensions or a linear relationship in higher dimensions.
- CSS box modeluses · The CSS box model represents each element as a rectangular box comprising content, padding, border, and margin areas.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.