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!
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 horizontallyacross 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…
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!..
@axelkaban, are you confirming that my inital feeling was right (and the lesson misleading)? Or, are you just as confused as I am?
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!
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:
Thanks for the clarification! Much appreciated, and I’m no longer confused!
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
After the naming conventions fried my brain the provided analogy in this lesson about short/tall people didn’t help me very much. Based on the diagram, I ended up thinking of it in terms of gravity; elements on top of each other are stacked and therefore their margins collapse but elements side by side aren’t forced together so their margins don’t. Hopefully someone finds that useful!
So you need to first clear as what is the margin. Think of it as a path around an element. The left margin and the right margin are the ones which are measured from left to right. And hence these are horizontal margins. The very definition of horizontal.
Similarly, the top and bottom margins are measured from top to bottom (or vice-versa). And hence these are called as the vertical margins. I hope this is clear. Do let me know if this makes it easier.
So you need to first clear as what is the margin. Think of it as a path around an element. The left margin and the right margin are the ones which are measured from left to right. And hence these are horizontal margins. The very definition of horizontal.
Similarly, the top and bottom margins are measured from top to bottom (or vice-versa). And hence these are called as the vertical margins. I hope this is clear. Do let me know if this makes it easier.
Hey All,
Looking for clarification on the math of “Margin Collapse”. To clarify, it applies either the margin-top or margin-bottom whichever is largest. (ie: Margin-top: 20px, margin-bottom: 30px, the collapsed margin will be 30px But if Margion-top:40px, margin-bottom 30px, the margin will be 40px)
“It may be helpful to think of collapsing vertical margins as a short person trying to push a taller person. The tall person has longer arms and can easily push the short person, while the person with short arms cannot reach the person with long arms.”
Doesn’t this example seem a little too specific… Is the author trying to share his personal trauma with us?
Why are left and right margins called horizontal margins and the top and bottom vertical? Shouldn’t it be the other way around?
Thinking of margins as invisible lines surrounding an element. The top and bottom margin spaces above and below an element run horizontally; conversely, left and right margins run vertically on either side of the element.
I am a Graphic Designer, and I just can’t wrap my head around it.
) below!
) to up-vote the contribution!
, when I then looked closely at the FAQ post for this exercise called… wait for it… 
…spot where I’m going with this? 
