FAQ: The Box Model - Margin Collapse


#1

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!


#2

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.


#3

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!


#4

Are there many other people confused like me about whether the top/bottom margins are horizontal or vertical, and vice versa for the left/right margins?

My inital thought was that the lesson is wrong in calling the top/bottom margins vertical, because I see these margins as running horizontally across the page, and the left/right margins as running up/down the page vertically

I was so sure I was right, that I’ve sent an error report. HOWEVER, having just read this exercise about Margin Collapse, I can see that it clearly calls the collapsing margins vertical. Surely, it can’t be wrong throughout the lesson… :thinking:

Anyway, I checked Wikipedia https://en.wikipedia.org/wiki/Margin_(typography), and saw that top/bottom margins are measured vertically (even though they run horizontally) and vice versa for left/right margins!.. :open_mouth:

So, I was feeling guilty (and pretty sheepish) about my error report submission :sweat::worried: , when I then looked closely at the FAQ post for this exercise called… wait for it… What is the reason behind collapsing on horizontal margins and not vertical:astonished: …spot where I’m going with this? :wink:

@axelkaban, are you confirming that my inital feeling was right (and the lesson misleading)? Or, are you just as confused as I am? :joy::rofl:

Having written this, I’m now most definitely feeling like a collapsed margin myself!.. I’m not sure whether I’m vertical or horizontal… but definitely collapsed! :crazy_face:


#5

Lol, that is a good point, I wrote the question in terms of confusion, but as you point out it turns to be even more confusing. I tried to deviate and clear it up by using only the terms top and bottom as well as left and right when explaining the relation of the margins, but it is fair to say that I should start with the disclaimer that left and right margins will always pertain to the horizontal (which do not collapse) and the top and bottom margins belonging to the vertical term. Why is it that they are assigned that way, mainly because if we think in grid terms (since all elements are actually set as boxes) left and right margins will be placed one next to the other on a row:

____      ______      _______
----|R| L|------|R||L|-------| etc.
----      ------      -------
     ^ ^         ^  ^
<----|-|---------|--|--------->Horizontal margin

Yet, our top and bottom margins are stacked up one on top of the other in columns:

 ---------  ----------
|         ||          |
 ---------  ----------                       ^
  bottom  |   bottom <----- vertical margin  |
 ---------------------                       | 
    top   |    top   <------ vertical margin |
 ---------  ----------                       v
|         ||          |

Thus, we have top and bottom margins as vertical and left and right as horizontal.

Sorry if I got you more confused before. Thank you for pointing it out!


#6

Thanks for the clarification! Much appreciated, and I’m no longer confused! :grin:

Unless I’m the only person who’s taken a while before the penny’s dropped on this concept, maybe an addition to the lesson material somewhere might help avoid any confusion i.e. explicitly stating that top/bottom margins = vertical margins, and left/right margins = horizontal margins, with a quick explanation of the logic for this.

By the way, what helped me to best rationalise the logic for this classification is the following:

Top/bottom margins expand or contract along a vertical axis (even though visually they run horizontally along the page).

Left/right margins expand or contract along a horizontal axis (even though visually they run vertically up/down the page).

I’ve included that in case it helps anyone else too :+1: