---
title: "margin collapsing in css"  
description: "margin collapsing in css"  
author: "Anonymous User"  
published: 2013-06-14  
updated: 2013-06-15  
canonical: https://www.mindstick.com/forum/1104/margin-collapsing-in-css  
category: "css-css3"  
tags: ["css-css3"]  
reading_time: 1 minute  

---

# margin collapsing in css

Hi [Expert](https://www.mindstick.com/articles/13120/an-expert-financial-advice-will-improve-your-finances),\
what is [margin](https://answers.mindstick.com/qa/104990/what-is-a-margin-call) collapsing in CSS. Can you provide any example.\
Thanks in advance.

## Replies

### Reply by AVADHESH PATEL

In CSS, margin collapsing occurs when the top or bottom margin of one element comes into contact with the top or bottom margin of another element. The concept is simple: The smaller of the two margins is reduced to zero; if both element margins are the same length, then one of the margins is reduced to zero. \

```
#top{margin: 20px;}#bottom{margin: 10px; }<div id="top"></div><div id="bottom"></div>
```

\
You can see the most common form of margin collapsing; the top margin of one element comes into contact with the bottom margin of another element. When this happens, the element with the bigger margin wins.\


---

Original Source: https://www.mindstick.com/forum/1104/margin-collapsing-in-css

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.