Cursos Empresas Blog Live Conf Eventos Precios

0:003:38

Recursos

Resumen

El colapso de márgenes sucede cuando dos elementos bloque adyacentes tienen un determinado valor de margin, entonces estos márgenes se solapan en un solo valor, el mayor de ambos.

Ejemplo de colapso de márgenes

Mira el siguiente código, cambia el valor de display a inline-block y observa el resultado.

Ejemplo de colapso de márgenes

Como puedes observar, al cambiar el display este comportamiento desaparece. Además, en flexbox y grid no ocurre el colapso de márgenes. Cuida los márgenes que colocas en los elementos de tipo bloque.

Contribución creada por Andrés Guano (Platzi Contributor).

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

Excelente aporte 👍

Ever Jose

Gracias!!

Emilio Ariel Santos Mateo

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

Jesús Enrique Morocoima Marcano

Javier Suárez Meerhoff

gracias!

Hector de Hoyos

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

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.

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

Jhoana España Urresty

José Daniel Gallegos Chavez

Hace 4 años

muy buen aporte compañera !!!

Joe Harry Mancera Monroy

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

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

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

maravilloso aporte

Hernán Josué Hernández Lamprea

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

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

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

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>

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

Diego Alejandro Moreno Pedroza

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

Usuario anónimo

User

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

Guillermo Baldán López

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

Christopher Andrés Guano Valencia

¡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

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

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

Joalin Pineda

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.

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

Jorge Alfredo Castro Morales

Que fácil lo haces ver Estefany. Muchas gracias

Muy cierto

Carlos Ramos

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

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

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

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

Enrique Palomino

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

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

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

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