Margin Collapse

Hi, guys. I’m new here. Apologize in advance if I chose a wrong category.
I’m learning CSS and got stuck when I faced such topic as “Margin Collapse”.

Could you please explain me the theory a little bit easier? I gotta mention that the main difficulty for me is to imagine how it’d be implemented in practice.

Thank you in advance for all your answers.

Not sure what the exact question is here. Could you please link us to the exercise for context? Thank you.

1 Like

Here is the link:
https://www.codecademy.com/courses/learn-css-box-model/lessons/box-model-intro/exercises/margin-collapse?action=resume_content_item&course_redirect=learn-css

1 Like
div {
  margin: 30px auto;
}

Because of built in margin collapse, the distant between div’s vertically will be 30px, not 60px. This is similar in nature to border-collapse on tables.

w3c still has the best explanation about when margins do and do not collapse:

https://www.w3.org/TR/CSS2/box.html#collapsing-margins

i can highly recommend reading it

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.