Técnicas de alineamiento antes de CSS Grid: margin y line-height

El colapso de márgenes solo sucede con los márgenes de top y de bottom, y esto solo sucede cuando dos márgenes verticales se tocan, aún no comprendo bien el concepto, pero po si a alguien le sirve, aAquí está una explicación más detallada sobre el margin collapse 🤔:
.
Entendiendo el colapso de margen
El caso del colapso de márgenes en CSS
.
En cuanto a la clase, una de las desventajas de usar este tipo de alienación es que necesitamos ser exactos con las medidas (px), por lo que si queremos trabajar con responsive o medidas relativas… buena suerte 😦
.
Por cierto, teff te manda a buscar un concepto que no conoces, mi cara al leer sobre ese concepto y nop entenderlo a la primera 😂👇:
.

Margin Collapse
El colapso de márgenes ocurre cuando el margen top y bottom de 2 elementos colindan y el margen final es el que sea mayor. Es decir, si un elemento tiene margin-bottom: 20px y el otro elemento margin-top: 10px, el margen final entre ambos elementos no será de 30px, si no que será de solo 20px.
Cabe aclarar que esto ocurre cuando usamos el display por defecto block.

Margin auto:
Para explicarlo en palabras sencillas se necesita comprender que:
1. Cuando se establece el margin: 0 auto; lo que hace el navegador es establecer el tamaño de los márgenes izquierdo y derecho por igual, además de que el superior e inferior tendrán 0 de margen, así:

  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;

2. Por lo tanto como en este caso, el contenedor padre tiene un width: 180px; (espacio celeste) y el elemento del padre un width: 60px; (espacio rosado o celeste-claro), DETERMINARÁ que hay 120px de espacio libre para compartir entre margin-left y margin-right:
Si se representaría de forma lógica en javascript:

var espacioLibre = 180 - 60; // 120
var porcionEquilibrada = espacioLibre / 2; // 2 porque se aplica hacia el eje x (izquierda y derecha)

Lo que daría:

margin-left: 60px;
margin-right: 60px;

Y para el contenedor que va hacía la derecha (margin: 0 0 0 auto;), sería:

var espacioLibre = 180 - 60; // 120
var porcionEquilibrada = espacioLibre / 1 //esto porque solo se aplica hacía la izquierda (margin-left)

y quedaría:

margin-left: 120px;

Según tengo entendido el Margin collapsing es cuando 2 elementos chocan en los márgenes por así decirlo?
Sé que el elemento que tiene mas margin es el que predomina del otro y lo que hace es que no toma los 2 márgenes si no como lo mencione solo el margen más alto.
Pero igual corríjanme si no es así, puede que este confundiendo el tema.
Gracias c:

Me quedé esperando que explicara qué era lo que estaba haciendo… ._."

Seré sincero, el relojito como guía para las posiciones de Top - Right - Bottom y Left me pareció una genialidad ya que nunca había podido aprender cual es cual.

Tecnica de Margin

• Propiedades que necesitamos
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Técnica line-height

Propiedades que necesitamos

Text Align

• Nos permite alinear textos de forma horizontal

Vertical Align

• Nos permite alinear textos de forma vertical

Line Height

• Nos permite controlar los altos de los textos

Tecnica Table Cell
Propiedades que necesitamos

• display: table-cell
• text-align
• vertical-align

Técnica positions
Propiedades que necesitamos

• position: relative
• position: absolute
• top
• right
• bottom
• left
• transform: translate()

En el minuto 9:28 se le mueven los textos porque los elementos “element1” “element2” y “element3” heredan la propiedad line-height de 180px de su padre “container1”. Sin embargo, luego la profe corrige eso aplicando un line-height específico para cada uno de los elementos anteriormente mencionados. Me costó entenderlo un poco pero revisando el diagrama de la profesora finalmente lo capté. Espero les ayude.

Excelente todo el tema de la documentación del curso

Excelente clase, algunas cosas no las entendía, tuve que repetir algunas veces pero ya todo claro, decidí usar la variable “:root{ }” ya que las medidas 20px y 180px son muy repetitivas, y así quedaría:

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

:root{
  --size-height:20px;
  --size-box:180px;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
  font-family: 'Lato', sans-serif;
  width: 550px;
}

.container {
  background: turquoise;
  width: var(--size-box);
  height: var(--size-box);
}

.element {
  width: 60px;
  height: 60px;
  text-align: center;
  padding-top: 10px;
  box-sizing: border-box;
}

.container1 {
  @extend .container;
  text-align: left;
  line-height: var(--size-box);
}

.element1 {
  @extend .element;
  background: papayawhip;
  display: inline-block;
  line-height: 42px;
  vertical-align: top;
}

.element2 {
  @extend .element;
  background: papayawhip;
  display: inline-block;
  line-height: var(--size-height);
  vertical-align: middle;
}

.element3 {
  @extend .element;
  background: papayawhip;
  display: inline-block;
  line-height: var(--size-height);
  vertical-align: bottom;
}

.container2 {
  @extend .container;
  text-align: center;
  line-height: var(--size-box);
}

.element4 {
  @extend .element;
  background: pink;
  display: inline-block;
  line-height: var(--size-height);
  vertical-align: top;
}

.element5 {
  @extend .element;
  background: pink;
  display: inline-block;
  line-height: var(--size-height);
  vertical-align: middle;
}

.element6 {
  @extend .element;
  background: pink;
  display: inline-block;
  line-height: var(--size-height);
  vertical-align: bottom;
}

.container3 {
  @extend .container;
  text-align: right;
  line-height: var(--size-box);
}

.element7 {
  @extend .element;
  background: lightcyan;
  display: inline-block;
  line-height: var(--size-height);
  vertical-align: top;
}

.element8 {
  @extend .element;
  background: lightcyan;
  display: inline-block;
  line-height: var(--size-height);
  vertical-align: middle;
}

.element9 {
  @extend .element;
  background: lightcyan;
  display: inline-block;
  line-height: var(--size-height);
  vertical-align: bottom;
}```

auto
auto es reemplazado por algún valor apropiado. Por ejemplo, puede usarse para centrar horizontalmente un elemento bloque.
div { width:50%; margin:0 auto; } centrará el div horizontalmente.

Un único valor aplicará para todos los** cuatro lados.**
Dos valores aplicarán: El primer valor para arriba y abajo, el segundo valor para izquierda y derecha.
Tres valores aplicarán: El primero para arriba, el segundo para** izquierda y derecha,** el tercero para** abajo.**
Cuatro valores aplicarán en sentido de las manecillas del reloj empezando desde arriba. (Arriba, derecha, abajo, izquierda)

Tecnica MARGIN:
.

.
.
Tecnica LINE-HEIGHT:
.

no es intuitivo ._. XD para esha si pero yo voy a tener que ver esta clase varias veces

Enlaces :
https://codepen.io/teffcode_/pen/YzGNOgQ
https://codepen.io/teffcode_/pen/oNzBPVB

Los márgenes top y bottom de los bloques a veces están combinados (colapsados) en un solo margen cuyo tamaño es el mayor de los márgenes combinados, un comportamiento conocido como colapso de margen.

Si tenemos un elemento con un margin-bottom de 3rem y otro elemento hermano adyacente con un margin-top de 2rem y estos márgenes colapsan, entonces el margen resultante será de 3rem (debido a que este es el mayor valor entre los márgenes que colapsan).

.

• MDN - Entendiendo el colapso de margen: https://developer.mozilla.org/es/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

Este curso es bien completo, se toma el tiempo para hablar bien sobre la historia, el concepto y el por qué de Grid.

Eso es algo que critico de algunos cursos de Platzi, donde la informacion esta muy resumida para lograr un video lo más corto posible, o poco y nada explican sobre el por qué de un elemento. Al final uno no termina de comprender muy bien por qué hace lo que hace

Es una muestra de profesionalismo abarcar de buena manera todas las areas de un curso =)

No tenía ni idea de por qué el margen auto sólo funcionaba con left y right. ¡Gracias por explicar el porqué!

Un pequeño recorderis de margin. 😃

Hice los ejercicios también teacher 😄

Margin

Line height

Pensé de forma distinta la alineación del .elemento2(pause el video y trate de resolverlo solo).
Hice una cuenta ➡️ margin para centrar = height(container)/2 - height(element)/2
Solo funcionaria para valores absolutos…creo(segundo mes en Platzi 💚)
Solo en los casos donde el valor del elemento padre sea el triple, como es en este caso 60 con 180, sumando el mismo tamaño del hijo ya lo centraríamos.

alineamiento en elemntos inline o con display:inline.

• line-height:altura del elemento
• text-align: eje horizontal.
• vertical-align: eje vertical

alineamiento con margin para elementos block o con display:block, grid, flex, etc (excepto inline)
width: ancho
height: alto
margin: ^ > v < (posiciones segun las manecillas del reloj)

Para el elemento 7 puede funcionar tambien:

 margin: 0 0 0 120px;

Line-height = Establece el interlineado del texto.

Esta maestra, se nota que es una de las personas mas limpia a la hora de desarrollar cualquier tarea, desde los temas hasta el GitHub, excelente chica.

Definitivamentre amo aun mas Flexbox y css grid sabiendo lo tedioso que era esto

Aquí el ejercicio:

CSS Alignments Techniques - Margin
https://codepen.io/luisfalconmx/pen/oNBveOx

CSS Alignments Techniques - Line Height
https://codepen.io/luisfalconmx/pen/rNjBpZR

Espero esto les sirva para entender el margin collapse como a mi.
![](

https://twitter.com/anniebombanie_/status/1313529606155239428

Fun fact: Siempre me lo “había aprendido” con TRBL y decía “Trouble” para recordar como iban las dimensiones en los shorthands jaja. La profesora me “tumbó” todo el paradigma y ahora solo puedo recordar las manecillas del reloj ⏰. Nota importante: Ver las actualizaciones de los cursos no importa cuanto creamos que sepamos. 😄 ¡Nunca paren de aprender! 💚

Resumen de border colaps:
•Border ccolapsi solo funciona para margenes verticales ↨
•Se agrego en la version 2 de box model
•Te trolea🤡 por la siguiente razon:

Cuando colocas un elemento con margin botton de 20px
y otro elemento que esta abajo con un margin top de 50 px
tu crees que tendras un espacio de 70px pero no por que pum!!!💣

Obtienes solo un margen de 20px y quedas como un 🤡 pensando que hibas a tener 7️⃣0️⃣px

Quizzes completados

El margin collapsing o colapso de márgenes ocurre cuando los márgenes bottom y top de dos elementos chocan o se combinan. En teoría la suma de los márgenes por ejemplo si tenernos un bloque con bottom de 20px y otro de 40x, se supondría que el margen total seria de 60px pero no, en realidad sería de 40px.

El margin collapsing solo pasa con top y bottom, no va a pasar con right o left. Y este también solo pasa cuando tenemos el display en block, en display flex no se puede dar el margin collapsing.

Existen 4 tipos de Margin collapsing:

Elementos adyacentes o contiguos
Un contenedor y su primer elemento
Un contenedor y su último elemento
Bloques vacíos

Fuentes:
https://cybmeta.com/colapso-de-margenes-en-css https://developer.mozilla.org/es/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

sino usaba flex o grid me era muy difícil alinear pero con esta clase ya soy un maestro de la alineacion 🤣

Codigo

.element1 {
@extend .element;
background: papayawhip;
margin: 0;
}

.element2 {
@extend .element;
background: papayawhip;
margin: 60px 0;
}

.element3 {
@extend .element;
background: papayawhip;
margin: 120px 0;
}

.element4 {
@extend .element;
background: pink;
margin: 0 auto;
}

.element5 {
@extend .element;
background: pink;
margin: 60px auto;
}

.element6 {
@extend .element;
background: pink;
margin: 120px auto;
}

.element7 {
@extend .element;
background: lightcyan;
margin: 0 120px;
}

.element8 {
@extend .element;
background: lightcyan;
margin: 60px 120px;
}

.element9 {
@extend .element;
background: lightcyan;
margin: 120px 120px;
}

Para las personas que quieran guardar estos ejecicios en sus maquinas, acá está el código en CSS y 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>Alineacion con grid y margin</title>
    <style>
        .wrapper {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 5px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            width: 550px;
        }
        .container {
            background: turquoise;
            width: 180px;
            height: 180px;
        }
        .element {
            width: 60px;
            height: 60px;
            background: papayawhip;
            text-align: center;
            padding-top: 10px;
            box-sizing: border-box;
        }

        .element1 {
            margin: 0;
        }
        .element2 {
            margin: 60px 0;
        }
        .element3 {
            margin: 120px 0;
        }
        .element4 {
            background: pink;
            margin: 0 60px;
        }
        .element5 {
            background: pink;
            margin: 60px 60px;
        }
        .element6 {
            background: pink;
            margin: 120px 60px;
        }
        .element7 {
            background: lightcyan;
            margin: 0 120px;
        }
        .element8 {
            background: lightcyan;
            margin: 60px 120px;
        }
        .element9 {
            background: lightcyan;
            margin: 120px 120px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="container">
            <div class="element element1">top left</div>
        </div>
        <div class="container">
            <div class="element element2">center left</div>
        </div>
        <div class="container">
            <div class="element element3">bottom left</div>
        </div>

        <div class="container">
            <div class="element element4">top center</div>
        </div>
        <div class="container">
            <div class="element element5">center center</div>
        </div>
        <div class="container">
            <div class="element element6">bottom center</div>
        </div>

        <div class="container">
            <div class="element element7">top right</div>
        </div>
        <div class="container">
            <div class="element element8">center right</div>
        </div>
        <div class="container">
            <div class="element element9">bottom right</div>
        </div>
    </div>
</body>
</html>

Para el ejercicio de line-height:

<!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>Alineacion con grid y line-height</title>
    <style>
        .wrapper {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 5px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            width: 550px;
        }
        .container {
            height: 180px;
            width: 180px;
            background-color: turquoise;
            line-height: 180px;
        }
        .element {
            margin: 0;
            padding: 0;
            display: inline-block;
            background-color: papayawhip;
            width: 60px;
            height: 60px;
            text-align: center;
            padding-top: 10px;
            box-sizing: border-box;
            line-height: 20px;
        }
        .container1 {
            text-align: left;
        }
        .element1 {
            vertical-align: top;
        }
        .element2 {
            vertical-align: middle;
        }
        .element3 {
            vertical-align: bottom;
        }
        .container2 {
            text-align: center;
        }
        .element4 {
            background-color: pink;
            vertical-align: top;
        }
        .element5 {
            background-color: pink;
            vertical-align: middle;
        }
        .element6 {
            background-color: pink;
            vertical-align: bottom;
        }
        .container3 {
            text-align: right;
        }
        .element7 {
            background: lightcyan;
            vertical-align: top;
        }
        .element8 {
            background: lightcyan;
            vertical-align: middle;
        }
        .element9 {
            background: lightcyan;
            vertical-align: bottom;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="container container1">
            <div class="element element1">top left</div>
        </div>
        <div class="container container1">
            <div class="element element2">center left</div>
        </div>
        <div class="container container1">
            <div class="element element3">bottom left</div>
        </div>

        <div class="container container2">
            <div class="element element4">top center</div>
        </div>
        <div class="container container2">
            <div class="element element5">center center</div>
        </div>
        <div class="container container2">
            <div class="element element6">bottom center</div>
        </div>

        <div class="container container3">
            <div class="element element7">top right</div>
        </div>
        <div class="container container3">
            <div class="element element8">center right</div>
        </div>
        <div class="container container3">
            <div class="element element9">bottom right</div>
        </div>
    </div>
</body>
</html>

Lo que no entiendo cuando acomoda los elementos es cuando mponer el margin auto.
A mi me salio colocando los siguientes codigos.

.element1 {
  @extend .element;
  background: papayawhip;
  margin: 0 ;
}

.element2 {
  @extend .element;
  background: papayawhip;
  margin: 60px 0;
}

.element3 {
  @extend .element;
  background: papayawhip;
  margin: 120px 0 ;
}

.element4 {
  @extend .element;
  background: pink;
  margin: 0 0 0 60px ;
}

.element5 {
  @extend .element;
  background: pink;
  margin: 60px 0 0 60px;
}

.element6 {
  @extend .element;
  background: pink;
  margin: 120px 0 0 60px;
}

.element7 {
  @extend .element;
  background: lightcyan;
  margin: 0 0 0 120px;
}

.element8 {
  @extend .element;
  background: lightcyan;
  margin: 60px 0 0 120px;
}

.element9 {
  @extend .element;
  background: lightcyan;
  margin: 120px 0 0 120px;
}

Que buen vídeo, muy bien explicado, en verdad mil gracias ❤️

Si le pones auto en right, ubica el objeto hacia la izquierda, lo mismo sucede cuando pontes auto en la posicion de left, lo manda para la derecha.

Primer valor de margin da el alineamiento vertical, y el segundo da el alineamiento horizontal.

que feo era CSS

Si los dos márgenes adyacentes son positivos, el margen resultante es el mayor de los dos. Por el contrario, si los dos márgenes son negativos, el margen resultante será el menor. Si un margen es positivo y el otro es negativo, el margen resultante es la diferencia entre el positivo y el negativo:

• Dos márgenes positivos: margen resultante igual al margen mayor. Por ejemplo, si los márgenes son 50px y 25px, el margen resultante será 50px.

• Dos márgenes negativos: el margen resultante es igual al margen menor. Por ejemplo, si los márgenes son -50px y -25px, el margen resultante será -50px.

• Un margen positivo y otro negativo: el margen resultante es la diferencia entre ambos. Por ejemplo, si los márgenes son 50px y -25px, el margen resultante será de 25px (50 – 25).

Explicación: line-height del mismo tamaño del contenedor…

Resulta que si hacéis el experimento y miráis el inspector de elementos, y veis la caja del texto este ocupa toda la altura de su contenedor. Es que como si le agregáramos un padding y dentro de ese padding, de ese espacio que ocupa de forma vertical, le dijéramos Arriba, abajo o medio.

Para que el contenedor (en este caso morado) se mueva con el texto debe ser "display: inline-block;"
también como en el curso y en este caso la etiqueta “p” debemos agregarle nuevamente un “line-height: 20px;”

• Recapitular, contenedor padre agregamos un line-height de su propio tamaño, al contenedor hijo un display: inline-block;, y al parrafo nuevamente especificamos un “line-heignt:; de nuestro gusto” ademas de su propiedad “vertical-align: top/middle/bottom;”
  
  

<!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>
    <style>
        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }
        .contenedor {
            /* display: inline-block; */
            height: 180px;
            width: 180px;
            background-color: aquamarine;
            line-height: 180px;
        }
        .mini-contenedor {
            display: inline-block;
            background-color: mediumorchid;
            height: 60px;
            width: 60px;
        }
        p, .mini-contenedor {
            line-height: 20px;
            vertical-align: bottom;
        }
    </style>
</head>
<body>
    <div class="contenedor">
        <div class="mini-contenedor">
            <p>Hola</p>
        </div>
    </div>
</body>
</html> 

Me siguió funcionando usando el:

 line-height: normal;

En la técnica de margin es necesario que el display por defoult sea block o inlkine-block para que sea pueda alinear los elementos. Porque hay elementos html que tienen display inline como el elemento ancla(a) o spam.

Si esto ere antes, supongo que es tecnología vieja aún así sirva, creo que no debería enfocarse tanto en esto sino en lo actual, ya que esto crea una gran confusión, la historia es importante pero no se debe vivir nuevamente, solo debe ser una referencia, es mi opini;ón acerca de esto.

Acabo de notar que la intro de las clases susurran Platzi

Tener en cuenta que margin: 120px auto; equivale a Top y bottom 120px - left y right=auto, si bien funciona lo correcto sería margin: 120px auto 0;

En mi caso es mejor aplicarlo directo en un html y empezar a mover posisiones. Comparto el código:

<!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>
<style>
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px; /* margen debajo de cada contenedor*/
width: 550px;
}

.container {
    background: gray;
    width: 180px;
    height: 180px;
}

.element {
    width: 60px;
    height: 60px;
    text-align: center;
    padding-top: 10px;
    box-sizing: border-box;
}

.element1 {
    width: 60px;
    height: 60px;
    text-align: center;
    padding-top: 10px;
    box-sizing: border-box;
    background: green;
    margin: 0;
}

.element2 {
    width: 60px;
    height: 60px;
    text-align: center;
    padding-top: 10px;
    box-sizing: border-box;
    background: green;
    margin: 60px 0;
}

.element3 {
    width: 60px;
    height: 60px;
    text-align: center;
    padding-top: 10px;
    box-sizing: border-box;
    background: green;
    margin: 120px 0;
}

.element4 {
    width: 60px;
    height: 60px;
    text-align: center;
    padding-top: 10px;
    box-sizing: border-box;
    background: goldenrod;
    margin: 0px auto;
}

.element5 {
    width: 60px;
    height: 60px;
    text-align: center;
    padding-top: 10px;
    box-sizing: border-box;
    background: goldenrod;
    margin: 60px auto;
}

.element6 {
    width: 60px;
    height: 60px;
    text-align: center;
    padding-top: 10px;
    box-sizing: border-box;
    background: goldenrod;
    margin: 120px auto;
}

.element7 {
    width: 60px;
    height: 60px;
    text-align: center;
    padding-top: 10px;
    box-sizing: border-box;
    background:brown;
    margin: 0 0 0 auto;
}

.element8 {
    width: 60px;
    height: 60px;
    text-align: center;
    padding-top: 10px;
    box-sizing: border-box;
    background:brown;
    margin: 60px 0 0 auto;
}

.element9 {
    width: 60px;
    height: 60px;
    text-align: center;
    padding-top: 10px;
    box-sizing: border-box;
    background: brown;
    margin: 120px 0 0 auto;
}

</style>
</head>
<body>

<div class="wrapper">
    <div class="container">
        <div class="element1">top left</div>
    </div>

    <div class="container">
        <div class="element2">center left</div>
    </div>

    <div class="container">
        <div class="element3">bottom left</div>
    </div>

    <div class="container">
        <div class="element4">top center</div>
    </div>

    <div class="container">
        <div class="element5">center center</div>
    </div>

    <div class="container">
        <div class="element6">bottom center</div>
    </div>

    <div class="container">
        <div class="element7">top right</div>
    </div>

    <div class="container">
        <div class="element8">center right</div>
    </div>

    <div class="container">
        <div class="element9">bottom right</div>
    </div>

</div>

</body>
</html>

Me parece que en este link hay una explicación bastante clara para line-height.

line height es como el tamaño de la caja y nos sirve para ubicarla , mas o menos lo que entendí

Que tal champions, buen dia… increible. vamos con todo!

Me costó un poco entender la propiedad

 line-height 

Al final es como el interlineado que muchos conoces.

Fueron 7 videos para ver el “papayawhip”…

WOW! es increible como con un graifico reusmen mucho! clarisimo!

Una nota sobre esto es que line-height añade espacio arriba y abajo de los elementos inline (y sus variantes como inline-block).
Esta técnica funciona, pero se puede tornar confusa o complicada cuando tienes que lidiar con bloques de texto que tengan 2 o mas renglones.
Esto también explica porque se uso para el primer elemento line-height de 45px y para el resto solo de 20px.

Les dejo mis ejemplos de como se harían estos ejercicios usando variables:
https://criniguez-curso-css-grid-layout.netlify.app/alineamiento/margin.html
https://criniguez-curso-css-grid-layout.netlify.app/alineamiento/line-height.html

Hace poco esta lidiando con un margin top que le estaba agregando a un con contendor hijo, pero no entendía porque ese margin se le agregaba al contendor padre
Ahora entiendo gracias a este concepto de colpaso de margen 👌👌

CSS = creatividad!

Otra forma de hacerlo con margin es:

.element1 {
  @extend .element;
  background: papayawhip;
  margin: 0;
}

.element2 {
  @extend .element;
  background: papayawhip;
  margin: 60px 0;
}

.element3 {
  @extend .element;
  background: papayawhip;
  margin: 120px 0;
}

.element4 {
  @extend .element;
  background: pink;
  margin: 0 60px;
}

.element5 {
  @extend .element;
  background: pink;
  margin: 60px 60px;
}

.element6 {
  @extend .element;
  background: pink;
  margin: 120px 60px;
}

.element7 {
  @extend .element;
  background: lightcyan;
  margin: 0 120px;
}

.element8 {
  @extend .element;
  background: lightcyan;
  margin: 60px 120px;
}

.element9 {
  @extend .element;
  background: lightcyan;
  margin: 120px 120px;
}

Buena clase!

Gran Curso+

En la alineación con line-height no me parecio tan intuitivo ya que se utilizo la propiedad display:inline-block de la cual no se menciona nada en el video.

Yo el tercer elemento lo pondría con margin: 120px 0 0 0; ya que si ponemos 120px 0 nos creara un margen por abajo que no es necesario y que en otros casos nos puede llegar a dar problemas con otros elementos.
Dicho esto los elementos que centramos de altura en el caso de que el padre cambiase en algún momento su tamaño, estaría mal centrado. Para centrarlo bien podríamos hacer es por ejemplo, el elemento dos centrarlo con un calc:
margin: calc(50% - 30px) 0;
Lo desplazamos un 50% del elemento padre y le restamos 30px (la mitad del elemento desplazado) para que este quede totalmente en medio, de tal modo que el elemento 3 sería: margin: calc (100% - 60px) 0 0 0; Probarlo a ver que os parece, veréis muy rápido el motivo por el que le restamos en el primer caso 30 y en el segundo 60 si elimináis el calculo y dejáis solo el porcentaje, fijaos como reacciona el elemento.

El colapso de márgenes es la fusión de los márgenes superiores e/o inferiores de dos contenedores.
.
sucede cuando los márgenes (superiores e inferiores) de los contenedores se tocan directamente, ya sean contenedores padre-hijos o hermanos directos.
.
NO sucede con margenes a los lados, sólo con márgenes superiores e inferiores.
NO sucede si hay un padding o border que no permita a los márgenes tocarse directamente.
.
Ejemplo #1: colapso de márgenes superiores de un padre y su primer hijo

.
Ejemplo #2: colapso de márgenes inferiores de un padre y su último hijo

.
Ejemplo #3: colapso de márgenes superior e inferior de hermanos directos

.
Ejemplo #4: colapso de márgenes de un contenedor vacío

.
FUENTE
Si me equivoqué en algo o desean saber más, por favor vayan directamente a la fuente 😃

Colapso de Márgenes:
Adicionando al comentario de Joel Dominguez Merino para entenderlo mejor : “Sé que el elemento que tiene mas margin es el que predomina del otro y lo que hace es que no toma los 2 márgenes si no como lo mencione solo el margen más alto.”.

no se si me adelante en este momento al lo que explicara mas adelante en el curso , pero ¿ Qué tan eficiente es esta técnica en el responsive design ?

Margin collapsing
El margen de un elemento block actúa como un espacio vacío, haciendo que los márgenes de otros elementos block (que también actúan como un espacio vacío) puedan ocupar el mismo espacio, generando así que pareciera que solo se expresa el margen mayor

Los 3 últimos elementos los logré con los siguientes margin:

Elemento 7: margin: 0 120px;
Elemento 8: margin: 60px 120px;
Elemento 9: margin: 120px 120px;

Lo hice bien o fue suerte? 😜

Interesante manera de alinear 😄

Hola a [email protected], ya me habia encontrado con este fenomeno del amrgin collapsing, ni siquiera busqué que era, creí que era un error. Pero resulta que es todo un tema ya que este fenomeno puede ser manipulado a nuestro antojo si sabemos como y utilizarlo a nuestro favor mientras aplicamos css a nuestro documento HTML.

No podria explicarlo bien, así que les dejo un video que me ayudío a entenderlo, lo suficiente como para tomar provecho de este y usarlo.

• Margin callapsing

Espero les sea de ayuda, aunque hay más documentación que dejaré po aquí:

• Margin collapsing link 2

• Margin collapsing link 3

😄

Estuvo bueno el meme de pikachu :'v Sentimiento estudiantil luego de aprender algo.

Que clase mas dinamica, 😊

Align with line-height is boring haha

Line Height

Tenemos 4 técnicas de alineamiento:

• margin
• line-height
• table-cell
• positions

Es importante conocer muy bien las propiedades que necesitamos para cada técnica.

Este es el resultado que se quiere lograr.

Empezamos con la técnica “Margin”, necesitamos estas prioridades:

• margin-top
• margin-right
• margin-bottom
• margin-left

Podemos declarar uno a uno, o podemos utilizar un Shorthand que seria
"margin: top right bottom left" en sentido de las manecillas del reloj.
Al igual se puede utilizar solo 2 propiedades que sera para ahorrar tiempo y tendrían el valor de “Top-Bottom & Left-Right”.

Existe otra propiedad que se llama Line-Height, en la que tenemos 3 propiedades:

• text-aling: Nos permite alinear textos de forma horizontal.
• vertical-align: Nos permite alinear de forma vertical.
• line-height: Nos va a permitir de forma vertical y controlar los altos en los textos.

Para los que no entendieron el colapso de márgenes les dejo el link de la documentación de MDN, ahi lo explican muy bien y hasta tienen ejemplos.

Link: https://developer.mozilla.org/es/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

Les dejo el link del codepen donde la profesora hizo los ejemplos, espero les sirva!!

https://codepen.io/teffcode_/pen/YzGNOgQ

este video es interesante sobre el Colapso de márgenes:
https://www.youtube.com/watch?v=jsrubKT_nfw

Good class.

Para el ejercicio de margin lo hice así

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
  font-family: 'Lato', sans-serif;
  width: 550px;
}

.container {
  background: turquoise;
  width: 180px;
  height: 180px;
}

.element {
  width: 60px;
  height: 60px;
  text-align: center;
  padding-top: 10px;
  box-sizing: border-box;
}

.element1 {
  @extend .element;
  background: papayawhip;
  // margin: ;
}

.element2 {
  @extend .element;
  background: papayawhip;
  margin: 60px 0;
}

.element3 {
  @extend .element;
  background: papayawhip;
  margin: 120px 0;
}

.element4 {
  @extend .element;
  background: pink;
  margin: 0 auto ;
}

.element5 {
  @extend .element;
  background: pink;
  margin: 60px auto ;
}

.element6 {
  @extend .element;
  background: pink;
  margin: 120px auto ;
}

.element7 {
  @extend .element;
  background: lightcyan;
  margin: auto 120px ;
}

.element8 {
  @extend .element;
  background: lightcyan;
  margin: 60px 120px ;
}

.element9 {
  @extend .element;
  background: lightcyan;
  margin: 120px;
}

creo que no estoy entendiendo mucho esta bien enredado el curso.

Les dejo un buen recurso para entender como funciona el colapso de margenes en CSS:
Margin Collapse Explained by Images.

Comparto mi practica de alineación utilizando la propiedad margin de css.

https://acamilolopezv.github.io/Alineacion-margin/

En el elemento 9 puse 120px y 120px y tambien salio jsjsjs

Sobre Margin Collapsing
What You Should Know About Collapsing Margins
The Rules of Margin Collapse 👈 este artículo es ilustrativo

El margin collapsing es cuando se encuentran los margenes de dos elementos ya sea horizontal o vertical. Cuando es horizontal se suman los margenes de ambos elementos y en vertical se toma el del elemento con margen mayor.

Ejemplo:
Horizontal
A 60px - B 40px = 100px
Vertical
A 60px - B 40px = 60px

Creo que nunca he necesitado alinear un elemento puramente con estas tres propiedades y realmente llega a ser un poco confuso y complejo, supongo que esto no es que si implemente mucho en la vida real.

Wow, muy buena la documentacion del curso, sin duda es una de las mejores clases que he visto.

Muy agradecida con los ejercicios de verdad! me encanta esta modalidad así queda super claro