Web Developer Fundamentals

1

Qué aprenderás sobre HTML y CSS

2

¿Qué es el Frontend?

3

¿Qué es Backend?

4

¿Qué es FullStack?

5

Páginas Estáticas vs. Dinámicas

Quiz: Web Developer Fundamentals

HTML

6

HTML: anatomía de una página web

7

Index y su estructura básica: head

8

Index y su estructura básica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatomía de una etiqueta de HTML

Quiz: HTML

Etiquetas multimedia

11

Tipos de imágenes

12

Optimización de imágenes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Quiz: Etiquetas multimedia

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

Quiz: Formularios

CSS

21

¿Qué es CSS?

22

¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatomía de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

Más sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desafío: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Quiz: CSS

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas prácticas y ejemplos de responsive

50

Imágenes responsive

Quiz: Responsive Design

Accesibilidad

51

Semántica

52

Textos

53

Labels, alt y title

Próximos pasos

54

Próximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Medidas EM

34/55
Recursos

Aportes 108

Preguntas 18

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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

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>

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.

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

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

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

Este tema si esta enredado.

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.

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

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

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

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.

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

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

Notas de la clase

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

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

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

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.

definición y calculo de em

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>

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

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.5
30)px=45px

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

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

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

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

Gracias al profe entendi em, pero siento que es inventar la rueda. Realizar recalculos porque si y que dependa de un padre, cuando hagas anidacion de dependencias puede ser un total dolor de cabeza y en una pagina muy grande o extensa podrias hacer un codigo poco legible o entendible sobretodo. Siento que fue inventado para hacer las cosas mas complejas.

EM toma como referencia la medida del padre directo para hacer la conversión

Muy buena forma de explicarlo, puede llegar a ser algo complicado de usar esta medida relativa, pero ahora se como funciona

Por fin pude entender bien acerca del EM excelente clase

Hola este es mi aporte.


Exactamente lo que dice el profe, Si heredamos el font-size del padre al hijo multiples veces se ira sumando.

em element measure c:

32. Mis apuntes sobre: “Medidas EM”

EM es una medida relativa, significa una medida tomando como referencia el tamaño del elemento padre.

SI no hay un tamaño definido, toma como referencia el tamaño establecido por el navegador.

Por ejemplo, el font-size por defecto de chrome es 16px, si asignamos al elemento un tamaño de fuente de 1.5em, será 1.5 veces el tamaño por defecto (del elemento padre), que daría como resultado, 24px.

El tamaño por defecto lo podemos establecer antes de asignar la medida em del elemento, para tener diferentes resultados.

Debemos tener cuidado al usarla, porque si se aplica dos veces, tomará como referencia el elemento anterior ya modificado.

Les comparto el código de la clase:

Código HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <main class="text-container">
        <p>I'm an example text</p>
        <div>
            <p>I'm another text example</p>
            <div>
                <p>I'm another text example</p>
                <div>
                    <p>I'm another text example</p>
                    <div>
                        <p>I'm another text example</p>
                    </div>
                </div>
            </div>
        </div>
    </main>
</body>
</html>

Código CSS

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

Excelente gracias por la aportacion!

los em pueden acumularse y acumular el efecto.
Si el tamaño de la fuente de un contenedor esta definida en em, debe tenerse en cuenta que, el tamaño real en pixeles que termine teniendo, será el tamaño de referencia para la fuente que se encuentre dentro de ese contenedor y que también sea definida en em.

¿En qué escenarios debería usar em?

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

Traducción
.
Señor navegador, por favor colócame estos estilos:

font-size: 1.5em;

Al elemento div que es descendiente de la clase text-container (tu ya sabes de que clase estoy hablando)
.
Atentamente,
.
El Front-end Diveloper

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.

Si tomamos como referencia una fuente de 12 puntos, comparando las medidas, tendríamos:

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!

En esta clase vimos la medida em antes que nada no es del todo la mejor practica usarla por que a medida que el proyecto se convierta en un proyecto complejo… El utilizar esta medida podría causar ciertos resultados no esperados por no tener el control total de las medidas.

¿Que hace la medida em?: Tomara el tamaño de fuente de su padre, al no haber una medida especificada. Este tomara la medida que da el navegador de 16px.

Ejemplo:

Como se puede ver el primer párrafo tiene un font-size de 24px ya que se le declaro un font-size: 1.5em es decir toma los 16 px por defecto mas + 8px por el .5 adicional.

Mientras que el segundo párrafo tiene un font-size de 36px
Por que??? Esto se debe a que el div padre del segundo parrafo toma como 1em = 24px y esos 24px mas 12px que vendrian a ser los indicados 1.5em hacen una sumatoria de 36px.

Codigo HTML

 <main class="main">
      <p>Soy un parrafo de Prueba, mi padre es "main"</p>
      <div>
        <p>Soy un segundo parrafo de Prueba, mi padre es un "div"</p>
      </div>
    </main>

Codigo CSS

.main {
  font-size: 1.5em;
}

.main div {
  font-size: 1.5em;
}

Medidas Relativas a la tipografía
em: Relativo al tamaño de fuente de un elemento. Si, por ejemplo, utilizamos 3em (font-size: 3em); mi texto aumentará 3 veces su tamaño en relación al tamaño que se esté utilizando por defecto.
ex: Aumenta el tamaño de mi letra en cuanto a su altura.
Rem: Es igual a (em) con la diferencia de que este actúa en la raíz. O sea, en la letra que esté utilizando por defecto.

.
Cuando hablamos de medidas relativa a la tipografia nos referimos a que el valor final que se calcula sera en base al tamaño de la fuente de su padre directo (em) o el padre raiz(rem).

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

¿Cuál sería el uso de EM?

Tomamos el elemento padre y a este le hacemos un calculo de una regla de 3

Ejemplo

si un div tiene una tamaño de fuente de 20px y a un hijo directo de este div le asignamos 2em el calculo seria:

20*2

El valor del hijo seria igual a 40px

Esto podría convertirse en un problema si tenemos muchas anidaciones si utilizamos em

importante

La verdad es que em es un lío… Facil de usar pero difícil tal vez para escalar un proyecto, según mi punto de vista

En definitiva, la unidad em significa «el tamaño de letra de mi elemento padre».

Espero les ayude 😃

Mucho ojo al usar el EM, tal como lo explica el profe, hay que tener cuidado con no optener valores no deseados.

Genial 👏

Puedo interpretar la medida EM como una proporción de una medida padre y ya entiendo por qué lo complejo de su aplicación.

em no es de las mejores medidas

Genial

Ahora ya tiene sentido el rem, ya que parece que el rem toma siempre a la etiqueta <html> como su etiqueta padre.

¿En todo caso cuáles serían los escenarios favorables para usar EM?

gracias

La unidad EM toma de referencia la medida que tenga el elemento padre directo y lo multiplica por la cantidad que se especifique con EM. Ej. si en el elemento main especificamos un font-size de 16px y al elemento pa dentro del elemento main especificamos un font-size de 1.5em se multiplica 16px por 1.5 dando 24px para el elemento p.
EM funciona para todos los atributos que tenga que ver con tamaño como font-size, padding, borde, etc.

<main class="text-container">
	<p>Soy un parrafo<p>
</main>```


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

😄 Hola alguien puede ayudarme con una duda un poco sencilla jajaja he visto que en las clases cuando abre el proyecto en el navegador el presiona clic derecho y le aparece open in broswer o bueno abrir en el navegador, a mi no me sale esa opción :c ¿Alguien sabrá porqué o cómo puedo abrirlo?
Es que siempre debo irme a la carpeta del proyecto y ya lo abro desde ahí jajaja agradezco mucho su respuesta.

Todos Asombrados con esto:

Mientras tanto yo:
(⊙o⊙)

Gracias.