Colapso de márgenes

En el caso de CSS Grid tampoco aplica, porque como vimos, cuando el contenedor ya maneja cierto layout el colapso de márgenes no sucede UwU
.

.
Entender esto está genial, porque a veces queremos poner márgenes de X cantidad de pixeles, pero luego vemos que entre los elementos también se ponen y acabamos teniendo el doble de márgenes jaja. Con el colapso de márgenes evitamos que se dupliquen, me encanta que la profesora lo explicó muy bien 💚.

Al igual que flex, cuando se utiliza grid, el colapso de margen tampoco suecede:

El curso esta genial pero lo que mas aprendi es la palabra basicamente aqui les dejo algunos sinonimos.

esencialmente
fundamentalmente
principalmente
prácticamente
primordialmente
escencialmente
predominantemente
mayoritariamente
ante todo
en su mayoría
en su mayor parte
especialmente
sustancialmente
en general
generalmente
en gran medida

Aquí la comparativa entre los elementos bloque, flex y grid
Vemos claramente que en flex y grid nos toma una margen no colapsada, a diferencia de un elemento bloque.

Me he repetido varias veces la clase, está increíble el curso 🚀

Como en todo, hay algunas excepciones a tener en cuenta cuando los márgenes no se colapsan.

Flexbox, Grid y otros elementos que no son de nivel de bloque.
El colapso de márgenes no se aplican a los flex items, grid items, a los elementos de posición absoluta ni a otros elementos que no sean de nivel de bloque.

Referencia: https://dev.to/lupitacode/entendiendo-el-colapso-de-margenes-margin-collapsing-4oj6#:~:text="En CSS%2C los márgenes adyacentes,resultante se denomina margen colapsado."

No hay Colapso de Margenes cuando usamos Display:Grid

En el codigo del Div dice “Mor” o entendi mal 😂😅

<div>
<p> mor o mar ?</p>
<p> aire </p>
</div>

COLAPSADO DE MARGENES VERTICALES: esto solo sucede con las margenes verticales de los elementos en bloque (contenedores). el colapsado de margenes verticales significa que dichas margenes se solapan, osea, se pone un margen encima de otro. el colapsado de margenes verticales no ocurre en elementos en bloque que tengan los atributos flexbox o grid.

un ejemplo para entender el colapsado de margenes verticales es el siguiente:

si un elemento1 esta encima de otro elemento2 y elemento1 tiene un margen inferior de margin-bottom:20px y elemento2 tiene un margen superior de margin-top:30px se creeria que los elementos se separan 50px pero en realidad esto no ocurre porque las margenes verticales se solapan haciendo que la separacion entre elemeto1 y elemento2 sea de 30px, osea, siempre se aplica el margin mas grande.

Resultados usando Flexbox y Css grid para evitar el colapso (o solapamiento) de márgenes

1. Con colapso de márgenes
   

   

2. Sin colapso, usando FlexBox
   

   

3. Sin colapso, usando Css Grid
   

   

Si dos elementos están con un display: block, se van a colapsar si o si. Para evitar esto, se puede usar flexbox de tal manera que simule dichos elementos mostrados en bloque.

En el caso de CSS Grid tampoco se colapsan los márgenes.

En resúmen, cuando dos contenedores iguales, uno seguido del otro, tienen un valor de márgen, este márgen colapsa y solo se aplica uno de los valores, en lugar de sumarse…

Excepto que estos contenedores estén dentro de otro contenedor cuyo display sea igual a flex o grid. Interesante

Yo ya sabía css pero decidí hacer este curso para repasar porque no lo toco hace bastante.
Mi opinión sobre el curso:
ESTE CURSO ES EXCELENTE! Nunca vi un curso tan didáctico, que explique las formas de forma tan simple y prolija.
Ojalá me hubiera topado con esto cuando empecé a estudiar css.

Por si no entendieron mucho
LINK para su comprensión

Dejo mis apuntes en notion aquí:
https://drive.google.com/file/d/1Jtbq3fuq5FaxekND4NmQ2j7AlwA8BJtA/view?usp=sharing

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

gracias profe excelente

El colapso de márgenes se estará aplicando si o si en los casos que los elementos tengan la propiedad “display” con el valor “block” (display: block) pero no afectara a otros valores con la propiedad “display”, por ejemplo “display: flex;” o “display: grid;”

Desde que aprendí el colapso de márgenes mis habilidades en css mejoraron 😃

.container{ display: flex; flex-direction: column; }

No se si lo hice bien 🙃

<!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>
        .container {
            display: grid;
            grid-column: auto;
        }
        div {
            margin: 20px;

        }
        #a {
            background: blue;
        }
        #e {
            background: red;
        }
    </style>
</head>
<body>
    <section class="container">
        <div id="a">Platzi</div>
        <div id="e">Master</div>
    </section>
</body>
</html>

En el caso del contenedor de tipo Grid no sucede el tema de colapso de márgenes, al igual que en todo los elementos que no sean bloque.

Recomiendo mucho leer este post para entender mucho más el tema: https://dev.to/lupitacode/entendiendo-el-colapso-de-margenes-margin-collapsing-4oj6

Lo que me sorprendió fue el: 👨‍👦 Caso 2 - Un contenedor padre y su primer elemento.

Para que se animen a leerlo dejo la conclusión 😃

📋 Conclusión
☑️ Un margen colapsado es lo que ocurre cuando se combinan dos elementos a nivel de bloque con márgenes verticales coincidentes. Cuando esto sucede, el mayor de los dos márgenes se asume como el único margen colapsado.
☑️ No se aplica a márgenes horizontales.
☑️ Sólo ocurre con los elementos a nivel de bloque es decir, display: block - esto no incluye los elementos inline-block.
☑️ Hay 4 casos en los que se genera un colapso de márgenes.
☑️ La especificación CSS es enorme. No intentes saberlo todo. Aprende los conceptos de alto nivel y las reglas comunes, busca cosas cuando las necesites y tómatelo con calma.

Cuando se maneja de tipo grid, en las pruebas que hice una vez, me aparecía con un espacio entre los 2 bloques, independiente de que sea en fila o en columna; y que puede ser independiente de las medidas; eso si incluyo las medidas del padding.

guau!!

Aunque ya sabemos como solucionar el colapso de márgenes, aun así, si tenemos una situación en donde no podamos tirar de flex, grid, inline-block, o lo que sea, dejo un par de vídeos de YouTube sobre el tema.
 
Colapso de márgenes por Juan Andrés Núñez de Wmedia
 
Colapsado de márgenes por DorianDesings
 
 
Un saludo y gracias.

Cuando a un elemento aplicamos un estilo de modelo de caja, los valores respetan el espacio de otro elemento que exista en seguida de éste. Cuando un elemento de bloque (por ejemplo un div, section, etc.) aplica el estilo de margin, éste estilo no se respeta con otro elemento de bloque, lo que produce un colapso de márgenes, es decir el espacio del margen de un elemento es el mismo espacio del margen del otro.

Para evitar un colapso de margen podemos hacer uso de un flexbox o un grid.

Cuando colocamos un elemento y abajo otro, sucede este fenomeno, el margin se colpasa y no se suma como pretendiamos hacerlo

EstO lo solucionamos aplicando, flexbox o grid

Este tema es realmente interesante

En el caso de grid tampoco se colapsan debido a las propiedades del display de su elemento contenedor padre. Excelente clase

No sabía esto de los margenes.
Información que cura.

Si ponemos el display del contenedor de tipo grid tampoco colapsa:

https://dev.to/camfilho/margin-collapse-explained-by-images-361e

Me encanta como explica de una manera clara el modelo de caja y sus implicaciones respecto a su tipo de display.

Profe me ayudaste a entender este tema que tanto se me habia complicado ❤️

Llevo varios años haciendo sitios web y nunca había escuchado de esto. Es bueno saberlo.

Notes:

• El margin collapsing se da cuando tenemos 2 o mas cajas con display block uno debajo del otro (solo se da de manera vertical)
• El margin collapsing no se da cuando se utiliza el display grid o flex

en CSS grid tampoco hay colapso de márgenes

Pasa lo mismo que en flex, no se colapsan los márgenes. 😄

No se sobreponen los bloques

<!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>
</head>
<style>
    .contenedor{
        display: grid;
        grid-column: 2;
        grid-row: 2;
        width: 500px;
        background-color: sienna;
    }
    
    .qww{
        height: 150px;
        width: 150px;
        background-color: royalblue;
        margin: 20px;
        padding: 30px;
    }
    .wer{
        height: 150px;
        width: 150px;
        margin: 20px;
        padding: 30px;
        background-color: seagreen;
        grid-column: 2/2;
        grid-row: 2/2;
    }

</style>
<body>
    <section class="contenedor">
        <div class="qww">Hola</div>
        <div class="wer">Como estas?</div>
    </section>
</body>
</html>

Efectivamente, tanto flex como grid no colapsan.

The Rules of Margin Collapse

tanto si usamos grid como flex el resultado es el mismo no evitamos el colapsado de márgenes

Colapso con Grid:
sí funcionó, en una, no se superpuso el margin al agregarle display: grid

Para las margenes con CSS grid, lo que sucede es que las cuadrìculas se adaptan al tamaño establecido en elñ margen de los elementos

Datos muy interesantes que si no se comprenden son muy dificil de estructurar.

No tenía ni idea del colapso de márgenes. Por lo general, todos los elementos que utilizo son display flex, de esta manera se me hace muchísimo más fácil maquetar toda la página web.

Lo tendré muy presente por si me toca debuggear código en el futuro.

Éxitos a todos en sus carreras

En CSS Grid no hay colapso de márgenes. Aquí les dejo mi código:

Estos conceptos son muy interesantes y muy importantes !

<style>
.container {
display: flex;
flex-direction: column;
align-content: center;
}
.grid{
display: grid;
width: 100px;
height: 100px;
background: papayawhip;
grid-template-rows: 1fr 1fr;
align-content: center;
}
div {
margin: 20px;
}
</style>
<body>
<div>Platzi</div>
<div>Platzi</div>
<section class=“container”>
<div>Platzi</div>
<div>Platzi</div>
</section>
<section class=“grid”>
<div>Platzi</div>
<div>Platzi</div>
</section>

Grid no se suman los márgenes, se comporta igual que si utilizamos flex ya que no es de tipo bloque

En el caso de grid tampoco se sobreponen debido a las propiedades del display del elemento padre.

Cuando se colapsan 2 márgenes el que prevalece es el de mayor valor.

Los márgenes se colapsan solo cuando:

Dos elementos del tipo bloque y están uno arriba del otro , los márgenes de estos elementos solo se colapsan en el eje vertical.

¿Cómo evitarlo?

Introduciendo nuestros elementos del tipo bloque dentro de un contenedor con características Flex-box o Grid.

Colapso de márgenes

Los márgenes top y buttom se combinan en un solo margen, asi, por ejemplo, dos elementos <p> con un margen de 20px guardaran un margen de 20px, y no de 40px. Esto no sucede en flebox y grid.

Como dato, si a los elementos le pones display: inline-block; también evita que haya colapso de márgenes.

Colapso de márgenes
Sucede:

• cuando hay dos contenedores adyacentes en bloque
  No sucede:
• Flexbox, Grid y elementos que no sean bloque

saaa

Tener en cuenta que los márgenes de flotantes y elementos absolutos nunca colapsan.

Excelente explicación y directo al tema.
Muchas Gracias teacher ✨

Directo al grano y bastante claro. 🙂

Interesante concepto el de colapso de márgenes, son pequeños detalles los que hacen grandes cosas…

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

Entendiendo el colapso de margen
Los márgenes Top (en-US) 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. Ten en cuenta que los márgenes de flotantes y elementos con posición absoluta nunca colapsan.

El colapso de margen ocurre en tres casos básicos:

Hermanos adjacentes
Los márgenes de los hermanos adjacentes son colapsados (excepto cuando el último hermano necesita ser limpiado después de usar los flotantes).
Padre y primer/último hijo
Si no hay un borde, padding, contenido en línea, block formatting context creado, o un limpiado para separar el margin-top (en-US) de un bloque del margin-top (en-US) de su primer bloque hijo; o no hay borde, padding, contenido en línea, height, min-height, o max-height para separar el margin-bottom de un bloque del margin-bottom de su último hijo, entonces esos márgenes colapsan. El margen colapsado termina fuera del padre.
Bloques vacíos
Si no hay borde, padding, contenido en línea, height, o min-height para separar el margin-top (en-US) de un bloque de su margin-bottom, entonces sus márgenes superiores e inferiores colapsan.
Cosas a tener en cuenta:

Cuando estos casos están combinados ocurrirá un colapso de márgenes más complejo (de más de dos márgenes).
Estas reglas se aplican incluso a márgenes con valor cero, así que el margen del primer/último hijo siempre termina fuera de su padre (de acuerdo a las reglas de arriba) independientemente de que el margen del padre sea o no sea cero.
Cuando se trata de márgenes negativos, el tamaño del margen colapsado es la suma del margen positivo más grande y el margen negativo más pequeño (el más negativo).
Cuando todos los márgenes son negativos, el tamaño del margen colapsado es el margen más pequeño (el más negativo). Esto se aplica tanto a los elementos adyacentes como a los elementos anidados.

En Grid así como en Flex tampoco aplica el colapso de margenes

Para evitarlo es importante el uso de flex y CSS grid 🙂

Ya me habia olvidado del colapso de margenes jajaja vino bien repasar este curso, esta genial ⚡