Streaming live at 10am (PST)

Margin collapsing behavior in web flow


#1

I noticed that top and bottom margins do not collapse in Webflow. Normal CSS behavior will have them collapse. Is it just me?

Webflow:
A div with a 10px bottom margin sits on top of a div with a 10px top margin. The total distance between the two divs is 20px (10px * 2).

CSS:
The distance between the divs would be 10px because of the collapsing behavior.

Please correct me if this observation is inaccurate.

Thanks.


#2

I don't believe I have never seen that happen in 10+ years of hand-coding CSS, and I would be incredibly angry if it DID happen.


#3

@shuenw, what you're describing expected behavior regarding margin collapsing is correct, though it depends on the properties of each element. This is well-documented.

  1. In Webflow, add two div blocks to a page.
  2. Add a class to the first one (we can call it Div 1), and give it a size of 50px x 50px.
  3. Set the margin-bottom to 50px.
  4. Add a class to the second div (we can call it Div 2), and give it a size of 50px x 50px.
  5. Set the margin-top to 50px.

Since these are empty divs, the margin should collapse as expected, leaving only 50px of vertical space between the two div blocks.

Pen demonstrating the same behavior outside of webflow: https://codepen.io/anon/pen/ZyRZNy


#4

Thanks for the thorough explanation. I must be using margins in exception cases where collapsing does not apply.