Medidas EM

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

Anderson Josué Oroya Silva

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 💪

Sura Naileth Cedeño Lopez

Platzi Team

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

RetaxMaster

Profe Platzi

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 ^^

Iván Arcos

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:

Freddy Zanazzo

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.

José Antonio Zegarra Medina

Arnaldo José Cisneros Zambrano

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

jazminlizette

Héctor Alonso Padilla Ramírez

Pixel to Em Converter

Juan Torrealba

jorge llanque

Branny Andere Ruiz Rivera

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>

Yair Lira

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

María Del Pilar Chávez Gutiérrez

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

MIGUEL EDUARDO OCHOA ARANGUREN

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.

Raúl Adolfo Sánchez Rodríguez

hace 10 meses

Mi aporte:

Alejandro Parra

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

David Castro

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.

Obed Paz

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.

Alba Guzman

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

Jose Antonio Rojas Ollarves

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

Jossie Steeven Quintero Giron

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)

Jhonanderson Tellez Parra

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é.

Carlos Ramos

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>

.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.

Samuel Alvarez Alvarez

hace 3 meses

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.

Victor Ocampo

Jose Luis Grande Acevedo

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.

Leidy Fabiola Cruz

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!

Spoke Lopez

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/

John Cardenas

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

Cristian Gonzalez

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.

Nestor F. Roldan

Este tema si esta enredado.

Anggi Vanesa Pallares Solis

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

Victor Manuel Sánchez Campoblanco

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.

Luis Angel Cruz Ruiz

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.

María Del Pilar Chávez Gutiérrez

Medidas absolutas:
MM = milímetros

CM = centímetros

IN = pulgada

PC = picas

PX = pixel

Medidas relativas:
%

REM

Juan Pablo Jimenez

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.

Jonathan David Olivos

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

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.

Jerry Gil Contreras

*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.

Fabian Flores

Notas de la clase

JochuaOrtiz

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 */
}

Yoshirys de Jesús Salas Corona

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 */		
}

Carlos Arturo Cruz Gutierrez

Queda claro el concepto Em.

Giselly Romero Nuñez

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.

Alvaro Diego Pérez Vázquez

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

Juan cruz Gómez

hace 20 días

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

Christian Orlando Mendivil Gracia

hace un mes

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" */

Luz Stella Ojeda Ballesteros

hace un mes

"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.

Jonathan Fernando Ramirez Valencia

hace 3 meses

Ricardo Alfonso Chavez Vilcapoma

hace 3 meses

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 😁

Marco Antonio Alducin Garcia

hace 4 meses

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.

oskr-lopez

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

Ariel Ale

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;
}

Carlos Alfonso Romero Muñoz

hace 6 meses

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

Carlos Alfonso Romero Muñoz

hace 6 meses

em va a tomar la medida del padre directo

Carlos Alfonso Romero Muñoz

hace 6 meses

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

Alejandro Nicolo Di Brigida Lo Iacono

hace 8 meses

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.

LUZBY NADYN CUSACANI VENTURA

(

hrenatogiron

Diego Alejandro Moreno Pedroza

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

Yasmil Gonzalez

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

Cristian Acevedo

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

Cusano Tech

hace 10 meses

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;
}

jhonatan89

Josue Quevedo Portas

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).

Yamil B. Prado

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

César Humberto Grifaldo García

.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 */
}

Rubén Ernesto Aragón Gil

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

Rodrigo Taipe

1em = 16px

Abidan Triguero Calle

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;
}

Luis Guzmán

EM puede ser un dolor de cabeza

Jeisson Espinosa

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

Joaquín Escalona Mella

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!

francy carolina chacon romero

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

Jose Rodolfo Florez Ortiz

Oh que interesante

José M. Veintimilla

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.

Pablo Lucas

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

edupr

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

fabio andres zamora osorio

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

Gianluca Reyes Cisneros

EM NO ES DE LAS MEJORES MEDIDAS

Gianluca Reyes Cisneros

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.

Andres Salazar

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
*/
}

Juan Camilo Valencia Silva

¡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 😁

SsimorPro

Forma Grafica EM vs REM

Andrés Felipe García Castro

Excelente

Juan Carlos Ortiz Romero

Excelente

Juan Carlos Ortiz Romero

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

Leobardo Licona Soto

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>

user_deleted_2244058

Si mal no recuerdo es bueno utilizar unidades relativas, ya que al pasar a ver esta pagina en un movil no afecte y se mantenga

Danny Pacheco

En el CSS les dejo esta explicación, del mismo código de ejemplo.

body{
    font-size: 20px;
}

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

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

Como body tiene 20px de tamaño de fuente, el .text-container equivale a (1.520)px = 30px.
Ahora .text-container div, toma como 1em=30px, porque esa es la medida de su padre directo. Entonces el tamaño del texto dentro del div equivale a (1.530)px=45px

Galo Recalde

El plug-in que está usando se llama Alfred, Y no hay para Linux 😦

Iván Santiago Tellez Hernandez

/* Agrandando el tamaño del texto con em, lo que hace es que toma el tamaño de fuente que tenga el padre directo, es decir esta tomando
el tamaño de fuente del html en este caso
donde 1em correspondería a 1em toma la medida del padre como tal
Para este caso el 1.5 corresponde a 24px, ya que seria 1.5em * 16px(valor del html) =24px /
/ body{
font-size: 20px;
} /
/ .text-container {
font-size: 1.5em;
} */

.text-container {
font-size: 1.5em;
}
/* para este caso el em del div va a tomar es el del texto de arriba, es decir 1.5em * 24px = 36px */
.text-container div{
font-size: 1.5em;
}

Johan Echeverri

body {
    font-size: 20px;
}

.text-container {
    font-size: 1em; /* em toma el tamaño de fuente que tiene el padre y lo multiplica por el valor que le demos */
}

/* em no se considera de las mejores medidas para utilizar ya que en proyectos grandes puede generar confucion y resultados no deseados.

ya que si el padre de una etiqueta que declaramos con em también tiene un em CSS no tomara en cuenta el valor del padre del primer em sino el valor del em y con base a este se realizara la multiplicación, con grandes cantidades de codigo esto puede generar confucion y muchos resultados no deseado, por lo que se recomienda usar rem. */

Nicolas Ochoa

em: "elemento": toma el tamaño de la fuente de su padre directo.

Misael Jafet Perez Carcache