Синтаксис

Формальный синтаксис функции calc():

свойство: calc(выражение);

Выражение внутри calc как правило содержит некоторое математическое действие, результат которого является значением css-свойства, к которому применён calc.

Выражение может включать такие математические операторы, как:

• сложение ( width: calc(10px + 25px) );
• вычитание ( width: calc(100px - 25px) );
• умножение ( width: calc(20% * 2) );
• деление ( width: calc(100% / 3) );

Валидным, но не имеющим эффекта, будет выражение:

.box {
  width: calc(20px);
}

Важной частью синтаксиса являются пробелы.

Пробелы обязательно должны быть по обеим сторонам у операторов + и - . Что, в свою очередь, не является обязательным для операторов * и / (но для красоты кода лучше ставить).

.box1 {
  margin-top: calc(50% - 8px); 
  /* валидное выражение */
}
.box2 {
  margin-top: calc(50%     -     8px);
  /* также валидное, количество пробелов не имеет значения */
}
.box3 {
  margin-top: calc(
    100%
    /
    3
  );
  /* также валидное, перенос строки допускается */
}
.box4 {
  margin-right: calc(100%/3); 
  /* валидное, но не эстетичное */
}

Хорошим примером для демонстрации необходимости в пробелах является использование отрицательных значений в вычислениях:

.box {
  margin: calc(5vw - -5px); /* валидное выражение, аналогичное (5vw + 5px) */
}