• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Math Functions

← Previous Next →

🔹 What Are CSS Math Functions?

CSS Math Functions allow you to perform dynamic calculations inside your CSS properties. These functions help build responsive, scalable, and conditional layouts.

Commonly used math functions:

  • calc()

  • min()

  • max()

  • clamp()

🔸 1. calc() – Calculate Dynamic Values

width: calc(100% - 60px);

Used to subtract, add, multiply, or divide values dynamically.

Supported operations:

  • + (addition)

  • - (subtraction)

  • * (multiplication)

  • / (division)

🔸 2. min() – Choose the Smallest Value

width: min(100%, 500px);

Chooses the smallest value between the two.

🔸 3. max() – Choose the Largest Value

height: max(200px, 50vh);

Chooses the largest value between the two.

🔸 4. clamp() – Set Minimum, Preferred, and Maximum

font-size: clamp(14px, 2vw, 24px);

Resizes between a minimum, preferred, and maximum range.

🔸 Why Use Math Functions?

✅ Makes layout flexible
✅ Avoids hardcoding media queries
✅ Enables better responsiveness
✅ Cleaner and dynamic styling logic

🔸 Example

.container {
  width: calc(100% - 2rem);
  padding: clamp(1rem, 2vw, 3rem);
  font-size: min(5vw, 20px);
}

Practice Questions

Q1. Set a container width to 100% - 200px using calc().

Q2. Use min() to limit image width between 100% and 300px.

Q3. Use max() to ensure card height is at least 50vh.

Q4. Apply clamp() to font-size from 12px to 24px.

Q5. Add padding using calc(2em + 10px).

Q6. Use calc() to center a div horizontally with margin.

Q7. Create a sidebar using width: calc(30% + 100px).

Q8. Use min() in a responsive grid layout.

Q9. Set margin using clamp() to make it responsive.

Q10. Multiply value using calc(2 * 1em) for line-height.

CSS Math Functions Quiz

Q1: Which function performs calculations in CSS?

A. calc()
B. math()
C. compute()
D. calculate()

Q2: Which math function chooses the smallest value?

A. max()
B. min()
C. calc()
D. clamp()

Q3: What does clamp(12px, 4vw, 32px) do?

A. Keeps value between 12px and 32px depending on 4vw
B. Always sets to 4vw
C. Uses only max value
D. Chooses the largest value

Q4: What is the result of width: calc(100% - 100px);?

A. 200%
B. 100% minus 100px
C. 100% plus 100px
D. Error

Q5: Which operator is NOT supported in calc()?

A. +
B. %
C. -
D. /

Q6: What does min(400px, 90vw) return on a small screen?

A. 400px
B. 90vw
C. 800px
D. 100%

Q7: Which function is ideal for responsive font sizes?

A. min()
B. max()
C. clamp()
D. calc()

Q8: What is the purpose of max() in CSS?

A. Picks the smallest value
B. Picks the largest value
C. Adds two values
D. Sets preferred value

Q9: Which function can define a flexible yet constrained value?

A. calc()
B. clamp()
C. min()
D. abs()

Q10: Which function would you use to calculate padding like 10px + 2em?

A. calc()
B. clamp()
C. min()
D. mult()
← Previous Next →
Login
Go Back Top