2
respuestas

[Duda] Explicacion del calc

Explicacion del calc porfavor, no entiendo de donde sale y cual es su funcion en la pagina @media screen and (min-width: 1024px) { .container { padding-left: calc((100% - 940px)/2); padding-right: calc((100% - 940px)/2); } }

2 respuestas
@media screen and (min-width: 1024px) {
    .container {
        padding-left: calc((100% - 940px)/2);
        padding-right: calc((100% - 940px)/2);
    }
}

¡Hola Jose!

El uso de calc en CSS es una forma de realizar cálculos matemáticos para establecer valores de propiedades. En el ejemplo que compartiste, se utiliza calc para calcular el valor del relleno izquierdo y derecho del elemento con clase .container.

En este caso, se está calculando el ancho restante de la pantalla después de restarle 940 píxeles al 100% del ancho de la pantalla, y luego se divide ese valor por 2 para obtener el relleno izquierdo y derecho iguales.

Por ejemplo, si el ancho de la pantalla es de 1200 píxeles, el cálculo sería:

(100% - 940px) / 2 = 130px

Entonces, el relleno izquierdo y derecho del elemento .container sería de 130 píxeles cada uno.

Esto permite que el contenido dentro del .container se centre horizontalmente en la pantalla, sin importar el tamaño de la misma.

Espero que esto aclare tu duda. Si tienes alguna otra pregunta, no dudes en hacerla. ¡Estoy aquí para ayudarte!

Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)