Ejercicio sobre equivalencia entre em y px de CSS

Ejercicio sobre equivalencia entre em y px de CSS

En esta publicación se presenta un rápido ejercicio conceptual para contrastar el funcionamiento de las unidades de medida em.

Es importante tener en cuenta que el tamaño em siempre es relativo a la propiedad font-size definida para el párrafo.

Pásate por esta entrada dónde se explica la teoría con más detalle.

Enunciado

A continuación se presenta el código de un documento html con dos párrafos cuya propiedad font-size es distinta para cada uno.

Completa la instrucción css necesaria para que el margen lateral izquierdo para los dos párrafos sea idéntico en píxeles y utilizando unidades de medida relativas em.

<!DOCTYPE html>
<html>
<head>
	<title>Unidad relativa em - F.Ricart</title>
	<meta charset="utf-8">
	
	<style>	
	p{ border:1px solid red;}
	p.primero{font-size:16px;margin-left:1em;}
	p.segundo{font-size:32px;margin-left: em;}
	</style>
</head>

<body>

<p class="primero">Este párrafo tiene un tamaño de fuente de 16px</p>

<p class="segundo">Este párrafo tiene un tamaño de fuente el doble de grande pero se desea que el margen lateral izquierdo sea el mismo que en el párrafo superior. ¿Cuántos em debería valer margin-left?</p>

</body>
</html>
2 párrafos uno debajo de otro
resultado final deseado ejercicio unidad medida css

Solución del ejercicio

Inicialmente el tamaño de fuente es 16px y el margen lateral izquierdo de 16px.

Si multiplicamos el font-size por 2 el margen lateral izquierdo pasaría a ser 32px de mantener la medida 1em.

Por tanto y para que siga valiendo 16px debemos multiplicar 32 por 0.5.

p{ border:1px solid red;}
p.primero{font-size:16px;margin-left:1em;}
p.segundo{font-size:32px;margin-left:0.5em;}

¡Hola!

Querido lector,

Este ha sido un rápido ejercicio para ver el efecto que puede tener sobre una página web un simple cambio como podría ser modificar el font-size.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.