[Duda] medidas relativas en .diferenciales__item

Hola buen día, la duda que tengo es referente a las medidas relativas que se asignaron en la clase .diferenciales__item en el css diferenciales; me queda claro que los íconos se van a repetir ya que los estamos asignando al background, y que para evitar que se repitan debemos declarar que no lo repita, todo bien hasta ahí, la duda es cómo sabemos que los valores que asignamos de top =1.5 rem y left= 2.5rem posicionan a los iconos a la izquierda alineados al iinico de la línea de texto??? cúal es el razonamiento para obtener dichos valores??? o se hace al tanteo??? Saludos.

.diferenciales__item {
    max-width: 350px;
    box-sizing: border-box;
    padding: 2rem 0 2rem 5rem;
    background-repeat: no-repeat;
    background-position: top 1.5rem left 2.5rem;

¡Hola Alumno!

Entiendo tu duda con respecto a las medidas relativas en la clase .diferenciales__item. En cuanto a tu pregunta, los valores de top y left que se asignaron en la propiedad background-position son medidas relativas que se refieren a la distancia que hay entre el borde superior y el borde izquierdo del elemento .diferenciales__item y la imagen de fondo.

En este caso, se utilizó la medida relativa "rem", que es una unidad de medida relativa a la fuente del documento. Entonces, el valor de 1.5rem en top indica que la imagen de fondo se posicionará 1.5 veces la altura de la fuente por encima del borde superior del elemento .diferenciales__item, mientras que el valor de 2.5rem en left indica que la imagen de fondo se posicionará 2.5 veces la anchura de la fuente a la izquierda del borde izquierdo del elemento .diferenciales__item.

En cuanto al razonamiento para obtener dichos valores, normalmente se utilizan medidas relativas para permitir que el diseño sea más flexible y se adapte a diferentes tamaños de pantalla y dispositivos. En este caso, se eligieron valores que se ajustan al diseño y que se ven bien en diferentes tamaños de pantalla.

Espero haber resuelto tu duda. ¡Buenos estudios!

¡Saludos!

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