Colapso de márgenes en CSS: Bloques, Flexbox y Grid

Contenido del curso

Introducción al desarrollo frontend

Maquetación con HTML

Maquetación con CSS

Diseño responsivo

Arquitecturas en CSS

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:003:38

Colapso de márgenes en CSS: Bloques, Flexbox y Grid

Curso de Frontend Developer

Clase 14 de 24

Clase 14 / 24

Comentarios (143)143 comentarios

Carlos Eduardo Gomez García

Hace 5 años

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

Sebastian Pedroza

Hace 5 años

Excelente aporte 👍

Ever Jose

Hace 5 años

Gracias!!

Emilio Ariel Santos Mateo

Hace 5 años

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

Jesús Enrique Morocoima Marcano

Hace 5 años

_Excelente aporte _👍

Javier Suárez Meerhoff

Hace 5 años

gracias!

Hector de Hoyos

Hace 5 años

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

Ambar Strocchia

Hace 5 años

Ni me había dado cuenta, capaz conviene prestar más atención al contenido y no a esos detalles. Seguro que si quiere puede decir otros "sinónimos". Pero bueno, capaz te conviene ir a una clase de literatura, gramática o algo más en ese aspecto.

Hector de Hoyos

Hace 5 años

Entiendo tu punto pero el uso de muletillas constantes me desespero no lo digo en mala onda solo como retroalimentacion.

Jhoana España Urresty

Hace 5 años

José Daniel Gallegos Chavez

Hace 4 años

muy buen aporte compañera !!!

Joe Harry Mancera Monroy

Hace 5 años

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 🚀

Reynaldo Fuentes Garcia

Hace 5 años

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=%22En%20CSS%2C%20los%20m%C3%A1rgenes%20adyacentes,resultante%20se%20denomina%20margen%20colapsado.%22

Daniel Subirá López

Hace 5 años

Ahora entiendo porque cuando ponía (margin top) a un elemento hijo, en ves de moverse con respeto a su padre ,el mismo "margin" lo atravesaba.

Muchas gracias por este a porte.

Fabián Salamanca

Hace 4 años

maravilloso aporte

Hernán Josué Hernández Lamprea

Hace 5 años

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

Con colapso de márgenes
Sin colapso, usando FlexBox
Sin colapso, usando Css Grid

Daniel Reymundo

Hace 3 años

Genial!!

fabio andres zamora osorio

Hace 5 años

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.

Erick Alejandro Graterol Barico

Hace 5 años

Es bueno saberlo pero rara vez uno deja de usar flexbox o grid en cualquier proyecto. Al menos yo, no dejo de usar el flexbox y grid para cualquier cosa que haga.

Juan Gui Arenas

Hace 5 años

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>

Erick Alejandro Graterol Barico

Hace 5 años

JAJAJA, solo tu lograste ver eso, yo ni le preste atención

Diego Alejandro Moreno Pedroza

Hace 4 años

Dice mar jajaja, yo también lo vi, pero es mar, no mor... Mor

Usuario anónimo

User

Hace 5 años

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

Guillermo Baldán López

Hace 5 años

¿Hay algún caso en el que el colapso de márgenes sea una situación deseable?

Christopher Andrés Guano Valencia

Hace 5 años

¡Hola! No hay caso en el que desees tener un colapso de márgenes, es mejor evitarlos para no tener resultados que no esperamos.

¡Nunca pares de aprender! 💚

Marcos Monteverde

Hace 3 años

No tengo gran experiencia como desarrollador, pero creo que si pueden haber casos en los que este colapso no te afecte pero aun asi siempre seria mejor evitarlos para tener un mejor control de tu proyecto. 😉

Michelle Duque De La Rosa

Hace 5 años

¿Cómo hace para mover como hizo en 2:14?

Joalin Pineda

Hace 5 años

Hola! Si quieres subir la línea de código Alt + Flecha arriba o Alt + Flecha abajo si lo que quieres es moverla hacia abajo.

Hernán Josué Hernández Lamprea

Hace 5 años

Gracias Joalin, excelente atajo. Por cierto, ¿alguien sabe cuál es el atajo para comentar una línea?

Jorge Alfredo Castro Morales

Hace 4 años

Que fácil lo haces ver Estefany. Muchas gracias

Daniel Reymundo

Hace 3 años

Muy cierto

Carlos Ramos

Hace 4 años

Clase 14 - Colapso de márgenes

¿Cuándo se crea el colapso de márgenes?

Cuando tenemos dos elementos bloque seguidos, por ejemplo:

<div>Platzi</div>
<div>Master</div>

¿Hacia qué lado se colapsan las márgenes de los elementos de bloque?

De manera vertical.

¿Cómo podemos evitar el colapso de márgenes?

Ubicando los elementos de bloque dentro de un elemento contenedor y a este asignándole ya sea display flex o grid. También podemos usar elementos que no sean de bloque para evitar el colapso de márgenes.
HTML

<section class="container">
       <div>Platzi</div>
       <div>Master</div>
   </section>

        .container
        {
            display: flex;
            flex-direction: column;
        }
        div
        {
            margin: 20px;
        }

Andres López

Hace 4 años

Las márgenes se colapsan cuando se tienen dos elementos con display block uno debajo del otro. Esto solo ocurre verticalmente.

!Colapso de imagenes
La superposición no ocurre con elementos con display grid, flexbox, a elementos con posición absoluta o aquellos con un display diferente de block.

Samuel Suárez

Hace 5 años

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

Diego Andrés Garzón Girón

Hace 4 años

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

Enrique Palomino

Hace 5 años

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.

Javier Núñez

Hace 4 años

Entonces; en los elementos tipo bloque sucede un colapso de margenes "verticales", pero si éstos elementos de tipo bloque están dentro de un contenedor, mágimanente éste colapso de margenes ya no sucede.

Álvaro Fabián Sanchez Sterling

Hace 4 años

Es correcto! asi que si en nuestro proyecto necesitamos que nuestro contenido no tenga colapso de margen lo globalizamos con un contenedor padre. y que si tenga el colapso de margenes con los contenedores padres. ¿estaria en lo coreccto verdad?

Recursos

Resumen

Introducción al desarrollo frontend

Fundamentos de HTML y CSS para Desarrolladores Frontend

¿Qué es HTML?

Motores de Renderizado en Navegadores: Funcionamiento y Etapas

Maquetación con HTML

Anatomía y Estructura de Documentos HTML

HTML Semántico: Mejora la Accesibilidad y SEO de tu Web

Etiquetas HTML esenciales para estructurar una página web

Maquetación con CSS

Anatomía de una Declaración CSS: Selectores y Sintaxis Básica

Selectores CSS: básicos y combinadores

Selectores CSS: Pseudo Clases y Pseudo Elementos

Cascada y Especificidad en CSS: Domina el Orden y Prioridad de Estilos

Tipos de Display en CSS: Inline, Bloque e Inline-Block

Flexbox y CSS Grid: Fundamentos y Aplicaciones Prácticas

Modelo de Caja en CSS: Propiedades y Uso Práctico

Colapso de márgenes en CSS: Bloques, Flexbox y Grid

Tipos de posicionamiento en CSS: Relative, Absolute, Fixed y Sticky

Z-Index y Contexto de Apilamiento en HTML/CSS

Propiedades CSS más utilizadas en diseño web

Diseño responsivo

Unidades de Medida en CSS: Absolutas y Relativas

Creación de Tutoriales para Compartir Conocimientos

Media Queries y Diseño Responsivo en CSS

Arquitecturas en CSS

Arquitecturas CSS: Mejora de Legibilidad y Mantenibilidad del Código

Metodologías de CSS: OOCSS, VEM, SMACS y Atomic Design

Próximos pasos

CSS para Entrevistas y Mundo Laboral

HTML y CSS: Fundamentos Esenciales para Frontend Developer

Colapso de márgenes en CSS: Bloques, Flexbox y Grid

Progreso del curso

Introducción al desarrollo frontend

Maquetación con HTML

Maquetación con CSS

Diseño responsivo

Arquitecturas en CSS

Próximos pasos

Recursos

Recursos