La función CSS calc ()

Aprenda a trabajar con la función CSS calc ()

loscalc()La función le permite realizar operaciones matemáticas básicas con valores, y es especialmente útil cuando necesita sumar o restar un valor de longitud de un porcentaje.

Así es como funciona:

div {
	max-width: calc(80% - 100px)
}

Devuelve un valor de longitud, por lo que puede usarse en cualquier lugar donde espere un valor de píxel.

Puedes realizar

  • adiciones usando+
  • restas usando-
  • multiplicación usando*
  • división usando/

Una advertencia: con la suma y la resta, el espacio alrededor del operador es obligatorio, de lo contrario no funciona como se esperaba.

Ejemplos:

div {
	max-width: calc(50% / 3)
}
div {
	max-width: calc(50% + 3px)
}

Descarga mi gratisManual de CSS


Más tutoriales de CSS: