Skip to content
CSS
Selectores, propiedades y valores
Mecanismos para añadir CSS a un archivo HTML
Selectores
Pseudoclases y pseudoelementos
Cascada y especificidad
Herencia
Display
Modelo de cajas
Posicionamiento
Medidas
Colores
Z-index y el contexto de apilamiento
Responsive Design
Arquitectura CSS
Flexbox
More
Share
Explore
Modelo de cajas

icon picker
Colapso de márgenes

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.
⁠
image.png
⁠
⁠

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
⁠
⁠
⁠
image.png
⁠
⁠
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.


Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.