No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Medidas EM

34/55
Recursos

¿Qué es la medida relativa "em" en CSS?

La medida "em" es una unidad de longitud en CSS que se utiliza con frecuencia para especificar tamaños de fuente, márgenes y rellenos. Su característica distintiva es que depende del tamaño de fuente del elemento padre inmediato, lo que la convierte en una medida relativa que puede generar algunas situaciones confusas para los desarrolladores si no se utiliza adecuadamente.

¿Cómo se utiliza la medida "em" en CSS?

Para comprender cómo funciona "em", necesitamos explorar un ejemplo básico en el que estilizamos un texto en HTML con CSS. Supongamos que tenemos la siguiente estructura HTML:

<main class="text-container">
  <p>Soy un texto ejemplo</p>
  <div>
    <p>Soy otro texto</p>
  </div>
</main>

Y queremos estilizarlo con CSS, específicamente con la medida "em":

.text-container {
  font-size: 1.5em;
}

Este código indica que queremos que el tamaño de fuente de .text-container sea 1.5 veces el tamaño del elemento padre "directo". En este caso, el elemento padre directo es el <html>, que generalmente tiene un tamaño de fuente predeterminado de 16 píxeles.

Ejemplo práctico de "em"

Supongamos que estamos trabajando en un proyecto CSS con las siguientes reglas:

body {
  font-size: 20px;
}

.text-container {
  font-size: 1em; /* ya no 1.5em */
}

.text-container div {
  font-size: 1.5em;
}

Dado el código anterior:

  • El <p> dentro de .text-container tendría un tamaño de fuente de 20 píxeles, ya que "em" está calculado en función del tamaño de fuente de su padre directo, body.
  • El <p> dentro del <div> tendría 1.5 veces el tamaño de fuente de .text-container, que sería 30 píxeles.

¿Cuáles son las confusiones comunes al usar "em"?

El uso de "em" puede ser problemático, especialmente en estructuras complejas con múltiples niveles de anidamiento de elementos, lo que puede llevar a comportamientos inesperados o no deseados en el tamaño de fuente. Un error común es asumir que todos los elementos dentro de una misma estructura heredarán el mismo tamaño de fuente cuando se usa "em", lo cual no es correcto.

El escenario donde un <div> tiene un font-size de 1.5em tomará el tamaño de fuente del padre inmediato (no ancestro), y así sucesivamente, multiplicando acumulativamente si hay anidaciones de tales situaciones.

Cómo evitar problemas con "em"

  • Uso cuidadoso: Asegúrate siempre de saber cuál es el elemento padre inmediato cuando usas "em", para poder prever el tamaño calculado.
  • Validación visual: Utiliza herramientas como el inspector de elementos del navegador para verificar rápidamente si los tamaños de fuente se comportan como esperas.
  • Estado inicial definido: Establece intencionadamente tamaños de base (font-size) en elementos raíz para mantener consistencia y previsibilidad.

Al final, "em" es una poderosa herramienta cuando se necesita escalabilidad y adaptabilidad en el diseño, pero es crucial comprender su dependencia del contexto para utilizarla correctamente y evitar resultados inesperados.

Mantente atento a la próxima clase, donde exploraremos "rem", la unidad que puede ofrecer una mayor consistencia y previsibilidad en tus proyectos de CSS. ¡Sigue aprendiendo y aplica estos conceptos para mejorar tus habilidades de desarrollo web!

Aportes 147

Preguntas 23

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

EM = es un acronimo de elemento y lo que hace es tomar el tamaño de fuente que tenga el padre directo ejemplo:

.container {
   font-size: 20px
   }

.container div {
    font-size: 2em
   }

aqui los el tamaño del div que esta dentro de la clase container tenda un tamaño de 40px, ya que
.
1em = 20px
.
y como estamos asignandole 2 em seria como 20px + 20px
.
y si por ejemplo tenemos el siguiente caso :

.container {
   font-size: 20px
   }

.container div {
    font-size: 2em
   }

.container div p {
   font-size: 1.5em
   }

a continuacion veremos que la etiqueta p tendra un tamaño de fuente de 60px
ya que toma como referencia el tamaño de su padre ( 40px ) y haria la siguiente operacion 40*1.5 que es igual a 60, es por eso que la etiqueta p tomo el valor de 60px

Unidades absolutas
Generalmente se usa el pixel “px”.

h1{
	width: 500px;
}

El problema de usar medidas absolutas es que pueden ser desproporcionadas para distintos tipos de dispositivos.
Unidades Relativas
*
Porcentaje

/*Ocupará todo el ancho de la pantalla sin importar el tamaño*/
h1{
	width: 100%;
}

em
Depende exclusivamente del cuerpo tipográfico. Es decir del font-size de la etiqueta de su elemento padre.

body{
	font-size: 20px;
}
h1{
	font-size: 2em; /*  2 x 20 = 40px */		
}

Lo bueno de esta unidad es que si en un futuro modificamos el valor del font-size, entonces sus otros valores se ajustarán como podría pasar en el siguiente ejemplo de código.

p {
	font-size: 24px;
	margin-top: 1em; /* 1 x 24 = 24px */
	margin-bottom: 1em; /* 1 x 24 = 24 px*/ 
}

Lo malo, es que si lo usamos como el profesor planteó como un problema al usar em, podríamos perder la cuenta de cómo calcular el em si es que tenemos muchos elementos anidados (un elemento dentro de otro) ya que depende de su padre directo.

Si te gustó mi resumen dale me gusta y comenta, así me motivo a hacer más resúmenes ✍

Sigamos aprendiendo juntos 💪

Los navegadores tienen por defecto 16px de font-size en el html

Una utilidad que se le suele dar a em (Cuando la aplicas bien) es la de escalar una página web, es decir, simplemente cambiando el tamaño de fuente de un padre general, puedes escalar todo un sitio web con base en dicha medida y cambiando solo un valor ^^

Justo como lo explicó Diego, las diferencias de cada uno, acá les dejo esta imagen y que la veremos también en la siguiente clase:

em: va a tomar el tamaño de fuente que tenga el padre directo, o en su defecto, a su ancestro más próximo que tenga un tamaño declarado.

Este video también tiene una explicación excelente de estas 2 unidades de medidas “em” y “rem”. Recomiendo verlo como un complemento de estas clases: https://www.youtube.com/watch?v=nz6DIeBdZtY&ab_channel=FalconMasters

Así acabe después de esta clase —> 😵‍💫🤯

Si quieres tener la vista del Dev tools que tiene el profe, haz click en “Show computed styles sidebar”.

em = unidad de medida que toma valor por el elemento padre o mas cercano,
Ejemplo:

<div> <!-- font-size: 16px -->
        <p> <!-- font-size: .5em; valor 8px r=16/2 -->
          	<p> <!-- font-size: 2em; valor 16px  r= 8*2 -->
          	</p>
        </p>
</div>

Si quieres que un elemento tenga 200 píxeles y el tamaño de la fuente en su contenedor es de 16 píxeles, en em tendrías que darle el valor 200 / 16 = 12.5em

creo que si se puede usar EM, pero hay que tener cierto nivel de habilidad respecto a la aplicación de la medida. para no tener conflictos con etiquetas superiores. es cuestión de gustos y de como se sienta cada desarrollador al trabajar.

Mi aporte:

Resumen del capitulo en Notion
https://n9.cl/vmiv

En CSS, la unidad de medida ‘em’ hace referencia al tamaño en puntos de la letra que se está utilizando. Por ejemplo, si se utiliza una tipografía de 12 puntos, 1em es equivalente a 12 puntos.

La unidad em se utiliza para hacer referencia al tamaño actual de la fuente que ha sido establecido en el navegador, que habitualmente es un valor aproximado de 16px. Normalmente está establecido en la etiqueta <body>, así se aplica a todo el documento en general, otra forma de establecer valores generales es con la pseudoclase :root.
De esta forma, una cantidad de 1em sería este tamaño establecido por el usuario, mientras que una cantidad de 2em sería justo el doble y una cantidad de 0.5em sería justo la mitad.

Con 1ex establecemos la mitad del tamaño de la fuente, ya que 1ex = 0.5em. Realmente, la medida ex está basada en la altura de la x minúscula.

(

All You Need Is Love and…

…follow this link

un muy excelente video


/*Medida EM 

	toma el tamaño de la fuente del padre mas cercano, por ejemplo si el padre
	tiene el tamaño de fuente de 16px entonces 1em seria igual a 16px

*/

.text-container{
	font-size: 20px; /*medida en pixeles */
}

p{
	font-size: 2em; /*1em = 20px*/
}

.text-container div{
	font-size: 16px; /*medida en pixeles*/
}

div p{
	font-size: 1.5em; /*1em = 16px */
}

*Recuerda que em toma el tamaño de su elemento padre directo, rem toma su tamaño de la raíz de todo, el html.

em

Represents the calculated font-size of the element. If used on the font-size property itself, it represents the inherited font-size of the element.

https://developer.mozilla.org/en-US/docs/Web/CSS/length

Con lo visto en este curso de la parte de medidas, investigue mas e hice una entrada en mi blog explicandolo detalladamente: https://www.comsoft-mexico.com/blog/unidades-de-medida-para-el-desarrollo-web/

Notas de la clase

Clase 34 - Medidas EM


¿Cómo funciona la medida em en CSS?

  • Con esta medida podemos hacer que un elemento tenga como medida la de su padre directo:
  • Ejemplo:
  • HTML:
<main class="text-container">
        <p>Soy un texto ejemplo</p>
        <div>
            <p>Soy otro texto ejemplo</p>
        </div>
</main>

  • CSS
.text-container{
    font-size: 1.5em;
}

.text-container div
{
    font-size: 1.5em;
}

  • Cómo sabemos todos los elementos HTML toman como su padre directo el elemento <html> el cual por estilos del navegador tiene un font-size de 16px. En este ejemplo vemos que tenemos tenemos un contenedor <main> el cual tiene una clase “text-container” y en el CSS le estamos diciendo que el font-size sea de 1.5em. Entonces lo que pasará es que el contendor <main> tomará por herencia el tamaño de 16px qué tiene de su padre directo <html> y lo multiplicará por 1.5 que tiene de su propio font-size, dándonos un resultado de 24px como su font-size. Este será el valor que tendrá como font-size el primer elemento <p>.
    Con el contenedor <div> pasa más o menos parecido, pero en este caso el padre directo del elemento <div> no es <html> sino <main>. Debido a este cambio de padres directos lo que pasará es que el elemento <div> toma como referencia el valor del elemento <main>, el cual en este momento es de 24px y nuevamente se multiplicará por 1.5 que tiene como font-size el elemento <div>, dándonos como resultado que el elemento <p> tendrá un font-size de 36px.

¿Es buena práctica usar la medida em?

  • La verdad es que no, ya que se puede volver engorroso la asignación de medidas a elementos debido a la herencia de sus padres directos.

Nota: em podría ser un problema si no se tiene cuidado de donde se mandan a llamar las dimensiones. em no es una de las mejores medidas.

  • em=Tamaño de letra del elemento padre

  • rem =Tamaño de letra elemento raíz

Medida EM: Em es un acrónimo de elemento y lo que hace es que toma el tamaño de fuente de su padre directo. Si un parrafo está encerrado en un div que tiene un tamaño fuente de 16px, entonces:

  • 1em → 16px

  • 2em → 32px

  • 1.5em → 24px

Si usamos em en la propiedad width, por ejemplo:

body
{
    background-color: blueviolet;
    font-size: 16px;
}
.text-container
{
    background-color: aqua;
    width: 18.75em;
}

Calculará el ancho tomando como referencia el tamaño de la fuente(font-size: 16px) de su padre.
Dando como resultado un valor de 300px (16*18.75)

Creo que el profesor cometió un error. En otro curso me explicaron que em toma la medida del elemento con medida absoluta más cercano no de su padre directo como dice el profesor y rem es al contrario la toma del elemento con medida absoluta más lejano. igual se entiende el funcionamiento pero creo que sería bueno aclarar este punto. corrija me si me equivoqué.
no estoy seguro de haber entendido ¿entonces em puede funionar en bucle continuo heredando la propiedad tantas veces como aparezca la misma?

RESUMEN CLASE 34:
MEDIDAS EM

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Medidas EM</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <main class="text-container">
        <p>Soy un texto ejemplo</p>
        <div>
            <p>Soy otro texto ejemplo</p>
            <div>
                <p>Soy otro texto ejemplo</p>
                <div>
                    <p>Soy otro texto ejemplo</p>
                    <div>
                        <p>Soy otro texto ejemplo</p>
                    </div>
                </div>
            </div>
        </div>

    </main>
</body>

</html>

CSS

.text-container {
    font-size: 1.5em;
}
.text-container div {
    font-size: 1.5em;
}

Medida em en css

nota: em es un acronimo de “elemento” y lo que hace es tomar el tamaño fuente que tenga el padre directo.

Aqui el tamaño del div que está dentro de la clase container tendrá un tamaño de 40px ya que 1em=20px como estamos declarando en el ejemplo:

.container {
    font-size: 20px;
}
/* Este es el padre, que le asignamos un font-size de 20px */
.container div {
    font-size: 2em;
}
/*Aquí 2em significa que tiene 40px, tomando su padre .container que tiene 20px */

Y si tendemos el siguiente caso:

.container {
    font-size: 20px;
}
/* Padre de .container div */
.container div {
    font-size: 2em; /* 1em=20px entonces 2em=40px. Heredado de .container */
}
/* padre de container div p */
.container div p {
    font-size: 1.5em; /* 60px */
}
/* .container div p tendrá un tamaño de fuente de 60 ya que toma como referencia su padre directo que es ".container div" y NO ".container" */

Em significa element, está medida toma la medida de su padre, por ejemplo 1em así no más serían 16px que es la medida del html pero si a una etiqueta contenedora le damos una medida, a la etiqueta que está adentro de esa contenedora al usarse em, em ya va a valer lo que se especifico en la medida de la etiqueta contenedora y no la medida del html.

Em es un acrónimo de elemento, lo que hace em va a tomar el tamaño de fuente que tenga el padre directo, quiere decir en este caso a nosotros a main no le hemos puesto ningún tamaño de fuente, esta tomando el tamaño de fuente que tenga el html, si yo le pongo un tamaño de fuente a main por ejemplo de 6px, de ahí va a empezar a tomarlo y 1 em van a ser estos 16px.

En CSS, las unidades em son un múltiplo del tamaño de fuente del elemento.

Por ejemplo, si para un selector CSS hemos especificado un font-size de 16px, entonces 1em = 16px:

✨ sigamos aprendiendo juntos!

EM Calculator Es una herramienta que nos permite convertir el tamaño de unidades de pixeles a unidades em relativas 😄

Lo bueno de aprender en platzi son los comentarios.
Las clases son muy buenas pero con los comentarios entender la clase es mas fácil.

Este tema si esta enredado.

em se trata de una medida que toma como referencia la medida del contenedor padre
.
Veamos el siguiente código:
.
En html

<body>
    <main>
        <div>
            <p>Este es un párrafo</p>
        </div>        
        <section class="main-section">
            <p>Este es otro párrafo</p>
        </section>
    </main>
</body>

En CSS

p {
    font-size: 1em;
}

Por defecto, html tiene como font-size: 16px. Por tanto, 1em es igual a 16px que es el padre de todas las líneas de código antes de aplicar ninguna modificación a los estilos por defecto.
.
Ahora vamos a aplicar un font-size diferente a la clase “main-section” dentro de la etiqueta section

.main-section {
    font-size: 20px;
}

Ahora tenemos dos font-size diferentes. Para todo el código fuera del section el font-size padre será 16px. Mientras que para el código dentro de section el font-size padre será 20px.
.
Si en CSS duplicamos valores:

p {
    font-size: 2em;
}

Para todo el código fuera de section 2em será igual a 32px porque el font-size padre es de 16px. Mientras que para el código dentro de main.section, 2em será igual a 40x porque el font-size padre de esa sección es 20px.

Em no toma como referencia al padre, sino el tamaño de fuente del elemento mismo.
Lo que pasa es que se genera una confusión debido a que si no se establece la propidead font-size antes de usar em, el elemento hereda el tamaño de del padre.
Esto se puede comprobar si cambias la propiedad font-size antes de usar em, por ejemplo:

.container{
	font-size:10px;	
	border:  .1em solid black;
}

El valor en del borde equivalente en px es 1, porque el tamaño de la fuente no se hereda del padre, debido a que éste se cambió en la propiedad font-size.

Medidas absolutas:
MM = milímetros

CM = centímetros

IN = pulgada

PC = picas

PX = pixel

Medidas relativas:
%

EM

REM

34.-Medidas EM

em es un acrónimo de elemento y lo que hace es tomar el tamaño de fuente que tenga el padre directo. Es decir, 1em= 16 pixeles que vienen por defecto en HTML. Y, si cambio el tamaño de main se modifica el valor de em. Pj. font-size: 20px hará que 1em=20px porque toma el tamaño del padre directo.

Hay que tener cuidado donde utilizamos em por lo que no es de las mejores medidas.

MEDIDAS EM

  • Depende de quien hereda ese tamaño, es decir, el valor de “em(elemento)” va a estar condicionado por el valor asignado en su elemento padre.
.text-container{
		font-size: 1em;
}
  • Por ejemplo si tenemos que un contenedor de texto tiene 20 pixeles como tamaño original, el texto que se encuentre dentro de ese contenedor va a estar referenciado por ese tamaño.
  • Por consecuencia si nosotros le decimos al texto que esta dentro de ese contenedor que es tenga 1em, eso quiere decir que tendrá el valor de su padre, y como su padre tiene 20 pixeles, 1 em = 20px
.text-container{
	font-size: 20px;
}
p{
	font-size: 1em; /*  1 x 20 = 40px */		
}

Queda claro el concepto Em.

Unidades relativas a la tipografía
em: unidad relativa al tamaño de texto definido en un determinado contexto. El em es una unidad que proviene del diseño tipográfico y equivale al espacio que ocupa el ancho de una letra M (“m” mayúscula) de un determinado cuerpo y alfabeto. El em hace referencia al tamaño de letra que se está usando.

Cuando se utiliza la unidad em, es imprescindible conocer el valor de referencia, de lo contrario saber que un texto tiene 1em ó 5em no nos dice realmente el tamaño de la letra.

Cuando se asigna una medida en ems, su referencia es el tamaño de letra del primer elemento contenedor que tenga establecido un tamaño de letra.

Px: Unidad canonica de una imagen
1Em: Es el tamaño de su padre directo
Rem: Sirve mucho para entornos escalables y responsivos

La principal ventaja de usar `em` es que es una unidad de medida relativa, lo que permite que el tamaño de fuente sea escalable. A diferencia de las unidades absolutas como `px`, `em` se basa en el tamaño de la fuente del elemento padre. Esto significa que si cambias el tamaño de fuente en un elemento contenedor, todos los elementos hijos que usen `em` se ajustarán automáticamente, mejorando la accesibilidad y la responsive design. Esto ayuda a crear un diseño más flexible y adaptable a diferentes dispositivos y configuraciones de usuario.
la verdad no se si la use siento que es mas facil determinar los root en css,desde el inicion, es bueno saberlo pero creo que es una cascarita en el codigo
Que sencillo todo con Diego a la cabeza. Ahora recien entiendo la relacion de estas medidas
Tremendooo, que bueno aprender esto. Cuánto error de arrastre he tenido. Sabía que necesitaba este curso. Gracias!
Hola!, estoy intentado cambiar el tamaño de texto de una seccion, pero al llamarla por su id en css no se cambia: `<section class="clase-em">       

Este es otro texto ejemplo

    </section>` al llamarla en css lo hago de esta manera, pero no funciona: `.clase-em {    font-size: 1.5em;}` y tratanto, lo hice funcionar de la siguiente manera, `.clase-em p{    font-size: 1.5em;}` mi duda es q no entiendo por que no funciona de la primera forma, si estoy llamando su id esta (tengo entendido) tiene mayor prioridad.

En esta clase, profundizaremos en el uso de la unidad de medida “M” en CSS, una fuente de confusión para muchos desarrolladores. Aprenderemos a utilizarla correctamente y entenderemos sus comportamientos y posibles desafíos.

Estructura HTML:

<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="style.css">
		<title>Unidad M en CSS</title>
	</head>
	<body>
		<main class="text-container">
		  <p>Ejemplo: Soy un texto</p>
		  <div>
		    <p>Soy otro texto</p>
		  </div>
		</main>
	</body>
</html>

Estilos CSS:

/* Estilo para la clase text-container */
.text-container {
	font-size: 1.5em; /* Tamaño de fuente utilizando la unidad "em" */
}

/* Estilo para el párrafo dentro del div */
div p {
	font-size: 1.5em; /* Tamaño de fuente utilizando la unidad "em" */
}

/* Estilo adicional para el párrafo dentro del main */
.text-container p {
	font-size: 20px; /* Tamaño de fuente en píxeles */
}

Explicación:

Unidad “M” en CSS:

  • La unidad “M” en CSS es una medida relativa que toma su tamaño de fuente del elemento padre directo.
  • En el ejemplo, creamos una clase llamada .text-container y aplicamos un tamaño de fuente de 1.5em a esta clase. “Em” es una unidad similar a “M” y también toma su tamaño del elemento padre directo.
  • Creamos un div anidado dentro del main y aplicamos un estilo a su párrafo. Aunque ambos párrafos deberían tener el mismo tamaño de fuente, debido al comportamiento de “M”, el párrafo dentro del div hereda un tamaño basado en el main, resultando en un tamaño de fuente más grande.

Problema con “M”:

  • “M” puede volverse problemático cuando se anidan elementos con tamaños de fuente específicos. En el ejemplo, si el main tiene un tamaño de fuente diferente, afectará al cálculo de “M” en los elementos hijos.
  • Se introdujo la unidad “em” como una alternativa más predecible, ya que toma su tamaño de fuente del elemento padre, pero siempre del elemento directo.

Uso de “Em” como Alternativa:

  • Para evitar problemas con “M”, podemos utilizar la unidad “em”. En el ejemplo, aplicamos 1.5em tanto a la clase .text-container como al párrafo dentro del div, garantizando que ambos tengan el mismo tamaño de fuente.
  • También aplicamos un tamaño de fuente diferente al párrafo dentro de .text-container para resaltar la diferencia en la herencia de tamaños de fuente.

En la próxima clase, exploraremos la unidad “rem”, otra medida relativa en CSS que se basa en el tamaño de fuente del elemento raíz (html). Esto proporciona una forma más consistente de manejar tamaños de fuente en contextos anidados. ¡Te espero en la siguiente clase!

videos de youtube de medidas de em

*¿Qué unidades de medida usar en CSS?
https://www.youtube.com/watch?v=EbsyJrtJgpw

La unidad de medida em en CSS es relativa al tamaño de la fuente del elemento al que se aplica. Un valor de 1em es igual al tamaño de la fuente actual del elemento. Si se utiliza en propiedades que no están relacionadas con la fuente, se basará en el tamaño de la fuente del elemento primario.

Aquí hay algunos ejemplos para ilustrar cómo se utiliza la unidad em:

  1. Tamaño de Fuente:
    css
    Copy code
    body {
    font-size: 16px; /* Establece el tamaño de la fuente base para el cuerpo */
    }

h1 {
font-size: 2em; /* Será 32px (16px * 2) */
}

p {
font-size: 1.5em; /* Será 24px (16px * 1.5) */
}
En este ejemplo, el tamaño de la fuente para h1 será el doble del tamaño de la fuente base, y para p será 1.5 veces el tamaño de la fuente base.

  1. Margen y Padding:
    css
    Copy code
    div {
    margin: 1em; /* Margen será igual al tamaño de la fuente del div /
    padding: 0.5em; /
    Padding será la mitad del tamaño de la fuente del div */
    }
    En este caso, tanto el margen como el padding del div se establecerán en relación con su tamaño de fuente.

  2. Anidación:
    css
    Copy code
    div {
    font-size: 18px;
    }

p {
margin-bottom: 0.5em; /* Será 9px (18px * 0.5) */
}
Aquí, el margen inferior del párrafo p se establecerá en la mitad del tamaño de la fuente del div padre.

La unidad em es especialmente útil cuando se trabaja con diseños escalables y responsivos, ya que se ajusta automáticamente según el tamaño de la fuente del elemento principal. Sin embargo, a veces puede heredar tamaños de fuente que no son deseables, por lo que es importante comprender cómo se propaga el tamaño de la fuente a través de la estructura del documento.

Eso de las medidas es un poco confuso, pero ya me esta quedando un poco mas claro…

Muy sencillo de entender las medidas relativas , este tipo de temas son faciles de digerir si ya traes una base de logica matematica

"em"
Es una medida que se basa en el tamaño de la fuente actual. Si se establece el tamaño de fuente de un elemento en 1em, significa que el tamaño de fuente será igual al tamaño de fuente del elemento padre.

La ventaja de utilizar “em” es que son más adaptables a diferentes tamaños de pantalla y dispositivos. Los usuarios pueden cambiar el tamaño de fuente de su navegador y la página web aún se verá bien.

.

El tener medidas variables para cada elemento usando em es muy malo luego si se quiere hacer cambios al estilo del proyecto, por eso es mejor tener una fuente raíz para poder trabajar sin problema alguno. Rem es la voz 😁

notese que, para el ejemplo de los DIV anidados, ya no uso los 20px en el body, si no, se verian mas grandes, pero el hecho es el mismo, se multiplicaria una y otra vez por 1.5 en anterior dato que tiene el hemano mas cercano.

Bueno de esta clase, no me quedo del todo clara profe, quede volando.

Jugando un poco con el código y aprovechando ese comportamiento anidado, les dejo una semilla visual para que prueben el resultado…

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main>
      <div>
        <p>Esto es un texto</p>
        <div>
          <p>Esto es un texto</p>
          <div>
            <p>Esto es un texto</p>
            <div>
              <p>Esto es un texto</p>
              <div>
                <p>Esto es un texto</p>
                <div>
                  <p>Esto es un texto</p>
                  <div>
                    <p>Esto es un texto</p>
                    <div>
                      <p>Esto es un texto</p>
                      <div>
                        <p>Esto es un texto</p>
                        <div>
                          <p>Esto es un texto</p>
                          <div>
                            <p>Esto es un texto</p>
                            <div>
                              <p>Esto es un texto</p>
                              <div>
                                <p>Esto es un texto</p>
                                <div>
                                  <p>Esto es un texto</p>
                                  <div>
                                    <p>Esto es un texto</p>
                                    <div>
                                      <p>Esto es un texto</p>
                                      <div>
                                        <p>Esto es un texto</p>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>

y ahora el style.css

* {
  box-sizing: content-box;
  margin: 0;
  padding: 0;
}

html {
  background-color: yellow;
  font-family: 'Courier New', Courier, monospace;
}

main {
  font-size: 0.8em;
}

main div {
  font-size: 1.1em;
  line-height: 0.4em;
  letter-spacing: 1.01em;
  color: blueviolet;

  text-shadow: red 2px 2px 0px;
}

Al heredar las medidas, no es tan recomendable usar esta medida en su lugar es mejor usar REM

em va a tomar la medida del padre directo

em (elemento) toma el tamaño de fuente del elemento o el HTML (16px) si pongo 1.5em nos da 24px ya que 1em = 16px

me costó entender bien esto de la em hasta que vi algo curioso que lo lleve a reflejo de lo que conozco después de verlo como 6 veces, es una lupa, o mejor reflejado, un lente fotográfico, es decir, 16x1em, es 16 no hay zoom, si aumentamos la em a 1.5, aumenta el zoom de la lupa, y si hacemos como en el ejercicio que se presenta, se sobre entiende que hace un aumento del aumento, me costó comprenderlo hasta que vi mi cámara y recordé que hay lentes que tienen ese zoom.

Ya entiendo por qué puede llegar a ser algo confunso el uso del EM pero esto solo sucede cuando son etiquetas anidadas unas dentro de otras

La unidad em siempre depende de su elemento padre es relativa al tamaño de texto definido en un determinado contexto cambia a los elementos hijos de acuerdo con el tamaño de fuente
(font-size) del elemento padre

hay que fijarse bien al padre antes de poner la etiqueta em y rem

El font-size por defecto de html es 16px.

EM es = a la medida de su papa (en este caso el padre de main es html)
si le damos 8px a HTML —> MAIN tomara 1 em como 8px—> luego div tomara el resultado de MAIN (si le damos 1.5em = 8x1.5 = 12px) —> si le damos 2em a div seran 24px ya que toma la medida del papa y la multiplica x2.
y asi sucesivamente…

html {
    font-size: 8px;
}
.text-container {
    font-size: 1.5em;
}

.text-container div {
    font-size: 2em;
}

Medida EM

La medida EM toma el tamaño de fuente que tiene el padre directo del elemento al que le estamos colocando dicha medida, y calcula la proporción que le estamos indicando.

NOTA: Tamaño por defecto en un navegador [etiqueta <html> : 16px]


EJEMPLO
En este ejemplo el elemento main tiene un tamaño de fuente por defecto de 16px, dentro de este hay un elemento hijo que en este ejemplo será <p> el cual tendrá un tamaño de 1.5em , lo que significa que <p> tomará el tamaño del elemento padre que en este caso es <main> y lo va a aumentar 1.5 veces, por lo que al multiplicar los 16px que tiene <main> por los 1.5 que indicamos con la medida em nos da como resultado un font-size de 24px, el cuál será el tamaño que tendrá en este caso nuestra etiqueta <p>

main {
	font-size: 16px;
}

p {
	font-size: 1.5em;  /* 16px * 1.5 = 24px */

⚠️ Sin embargo hay un problema con esta medida, y es que si no tenemos cuidado de cuantos elementos padres con un Font-size indicado hay por arriba del al que le indicamos la medida EM podemos empezar a tener texto con medidas muy diferentes a las que buscamos, ya que como comentamos en llenas anteriores, el em asigna como medida la proporción indicada con relación a los elementos padres pudiendo tener el problema de que estos por una mala organización se vayan anidando uno con otro conforme más elementos padres vamos tendiendo en nuestro proyecto).

EM: Toma el tamaño de fuente del Padre.

.text-container{
    font-size: 1.5em;
    /* em agarra el tamaño de fuente del contenedor padre directo, en este caso el tag html que es de 16px y se le agrega 0.5 el valor del mismo, siendo que, 16px * 1.5 = 24px */
}

/* 1 em = pixeles originales o predeterminados del contenedor padre directo

Por ejemplo: en body se tiene un font-size de 20px, pero al momento de asigna un font-size en el contenedor main de 1.5em, este valor será de 30px
*/

.text-container div{
    font-size: 1.5em;
    /* Esto genera un problema de fuente en contenedores anidados al obtener el elemento font-size del contenedor padre haciendo que la fuente se vuelva más y más grande */
}

Yo antes creía que la medida EM era porque se refería al tamaño de la letra M.

1em = 16px

EM puede ser un dolor de cabeza

Información resumida de esta clase
#EstudiantesDePlatzi

  • em es un acrónimo de elemento y toma el tamaño de la fuente que tiene el padre directo

  • Es importante saber usar em y no es tan bueno usarlo como medida

https://type-scale.com/ Les comparto este recurso que nos permite ayudar a definir la escala de nuestra font en sus distintos niveles (de h1 a h6) ya sea en px o en em. ¡Saludos!

y ahora??.. en que momento pongo en practica todo esto … ay ay ay

Oh que interesante

Medidas EM

.text-container {
    font-size: 1.5em;
}

em toma el tamaño de fuente que tenga el padre directo. Como no tiene, toma la del html. Aquí hace un cálculo, el tamaño de fuente de html (16px) por 1.5, que nos da 24px.

body {
    font-size: 20px;
}

Si agregamos un tamaño de fuente al body, ahora nuestro valor anterior tomará éste como referencia, ya que su padre más cercano.

Pero ojo: Aplicar medidas em puede ocasionarnos problemas. Los valores se acumulan por lo que una de nuestras etiquetas contenidas puede salir del tamaño esperado.

div {
    font-size: 1.5em;
}

El valor de este div tendrá el tamaño aumentado del padre directo, que también está aumentado.

Es por esto que em no es el mejor sistema de medida.

Hola. Les comparto este repositorio que sirve de guía para el examen final, pues contiene las preguntas que se encuentran en el examen, la justificación y el video del curso donde se habla sobre eso. Espero y les sea de utilidad 😄.
Platzi-Test

El EM me recuerda a la escala de fuente de algunos Editores de texto.

unidad em : es una unidad de medida relativa que depende del tamaño de letra asignado al contenedor padre mas cercano. la unidad se llama em (pronunciacion de la m en ingles) porque en imprenta se usa la letra m como referencia ya que es el caracter mas ancho que existe por lo tanto el tamaño de la letra m se usa para calcular el tamaño del resto de letras.
.
.
1em = valor del atributo font-size del contenedor padre mas cercano, osea, si el contenedor <body> tiene el atributo font-size = 10px, entonces, todos los atributos del elemento hijo ya sea padding, margin, etc, donde se asigne 2em tendran un tamaño de 20px, osea, se multiplica el valor de em por el valor que se ponga al font-size del contenedor padre mas cercano. si el contenedor padre no tiene el atributo font-size, entonces, em toma como referencia 16px que es el tamaño de la letra m que tiene la raiz del documento html

EM NO ES DE LAS MEJORES MEDIDAS

DIFERENCIAS DE LAS MEDIDAS EM Y REM:

La unidad em tiene como referencia de medida el font-size del elemento actual.
La unidad rem tiene como referencia de medida el font-size del elemento root, la etiqueta <html> (en inglés sería como “root em”).

Ahora en detalle: Ya sabes que em y rem son dos unidades de CSS relativas. En concreto son relativas al font-size existente. Sin embargo, mientras que em tiene referencia el tamaño de la fuente del elemento donde se usa esa unidad, rem tiene referencia al tamaño de la fuente definido en el elemento root.

Mis notas de clase: Puedes verlo en ejecicón desde aquí

HTML

<section id="em-size" class="text-container">
	<h2>Medidas EM</h2>
	<p>Soy un texto de ejemplo por fuerita de un div, solo dentro de un section</p>
	<div>
		<p>Como parrafo dentro de un div cambio en comparación al otro parrafo!</p>
		<div>
			<p>Souy un parrafo dentro de otro div, con tamaños de locura!</p>
		</div>
	</div>
</section>


CSS

body {
	font-size: 20px;
}

.text-container {
	font-size: 1.5em;
	/* 1em es el 100% del tamaño de fuente del elemento padre, para este caso, quien determina el tamaño es la etiqueta body, ya que en la rama de .text-container ningun otro elemento ha determinado un tamaño distinto*/
}

.text-container div {
	font-size: 1.5em;
	/* hace doble heredado por lo siguiente:
	1 .text-container tiene un font-size de 1.5em (1.5em de body es igual a 30px)
	2 div tiene un font-size de 30px (herdado de .text-container) y este determina el tamaño base para tomar un nuevo font-size. Aqui el font-size es 1.5em de 30px ó 45px
*/
}

¡HEEEEEYYYY! Si no quieren estar haciendo siempre la conversión de px a rem, existe una extensión para ello en VS Code llamada "px to rem"
Una vez la tengamos instalada, lo único que tenemos que hacer es dar “alt izq + z” y automáticamente nos hará la conversión.
La pueden descargar aquí

Espero les sirva 😁

Forma Grafica EM vs REM


Excelente

Excelente

.text-container {
  font-size: 1.5em;
}
.text-container div {
  font-size: 1.5em;
}

em

Hereda el tamaño de su elemento padre directo.

<style>
      
        /*** em: hereda el tamaño de su elemento padre ***/
    
        .text-container {
            font-size: 1.5em;

        }
        .text-container div {
            font-size: 1.5em;

        }
    </style>
</head>
<body>
    <main class="text-container">
        <p>Soy un texto ejemplo</p>
        <div>
            <p>Soy un texto ejemplo dos</p>
        </div>
    </main>
</body>