FAQ: The Box Model - Margin Collapse


This community-built FAQ covers the “Margin Collapse” exercise from the lesson “The Box Model”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn CSS

FAQs on the exercise Margin Collapse

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!


I can live with the fact that horizontal margin adds-up while vertical margins don’t… but why is that? I’m just curious what’s the reason behind it.


While I definitely don’t know for sure, my guess it has something to do with how we consume web pages.

We’re accustomed to vertical scrolling and reading content from top to bottom to an endless degree while horizontal scrolling isn’t really user-friendly.

Rather than focusing on why vertical margins are collapsible, I’m thinking horizontal is not collapsible so that it’s easier to create a static width across all your content.
So, for example if a version of the web page is designed to be 1000px wide, you know that all of your horizontal measurements need to add up to 1000px across the board. Since they’re not collapsible horizontally, you don’t have to worry about bigger margins eating smaller margins and making the math confusing.

At least that’s what I got out of it. Would love to be corrected or explained more properly!