Collapsing margins

Frequently Asked Questions CSS FAQ
1

Question

What is the reason behind collapsing on horizontal margins and not vertical?

Answer

First, lest address that the collapsing margins are the vertical margins, top and bottom margins, even though they are on the horizontal line of the element (if we go back to the box model) they take into account the window, which is the space where all the elements exist.

Let’s think of it as a grid of boxes. then top and bottom margins will be stacked up one on top of the other, thus being on a vertical line, the same way we can say that the left and right margins will always be one next to the other in a row (generally speaking), thus being placed on a horizontal line.

Now, the main reason why we can get collapsing margins on top/bottom values is that one of the rules for collapsing to happen is for an element to be a block type element. for example, if we have two divs together:

<div id="one" class="div-one">
</div>
<div id="two" class="div-two"> 
</div>

they will both be by default block elements, which means they will be one, on top of the other, to make them visible (since they don’t have any content) this will be their css:

.div-one {
  height: 50px;
  background-color: papayawhip;
}

.div-two{
  height: 50px;
  background-color: cyan;
}

and we will see:

15%20PM
15%20PM925×126 329 Bytes

Thus, if they both have top and bottom margins, we would have collapsing margins since they both are block elements.

So with the adjustment:

.div-one {
  height: 50px;
  background-color: papayawhip;
  margin-bottom: 20px;
}

.div-two{
  height: 50px;
  background-color: cyan;
  margin-top: 10px;
}

we will see:

33%20PM
33%20PM926×143 2.77 KB

the bottom div’s (.div-two) margin is still there, but it has become part of the overall margin of 20px. This capacity of block elements (once we are aware) allows for an easier and cleaner separation between elements to be even.

It is not a quality of inline elements, and that is the main reason why there is no collapsing on vertical values, since having elements side to side can only be made by changing the way the element is displayed, from being a block element to an inline element:

.div-one {
  display: inline;
  background-color: papayawhip;
  padding: 50px; /*padding gives the inline div volume. Width and height do not apply. */
  margin-right: 20px; 
}

.div-two{
  display: inline;
  background-color: cyan;
  padding: 50px;
  margin-left: 10px;
}

20%20PM

leading to having to account for how we should manipulate our margins.

20 Likes
2

Hi!

What I do not understand is, why margins useful for us when we have padding, border, ect. Why do we need an extra frame? Also, when we create “something”, how will it effect our eg: images? What does it do with it? What differences are noticeable? Sorry, I just do not understand …
Thank you.

3 Likes
3

Padding and margin are not the same thing. Margins will affect the size of an element in ways that constrain it, whereas padding will stretch an element to allow it.

article h1 {
  border: 1px solid teal;
  margin: 1em;
  padding: 1em;
}

HTML

    <article>
      <h1>Heading</h1>
    </article>

margin_and_padding

    <article>
      <h1>A quick brown fox jumps over the lazy dog!</h1>
    </article>

marginandpadding

13 Likes
4

There is no reason for collapsing; it is because someone thought it should be like that or mistakenly added such a thing.
Not everything require a justification. There exist norms for that reason.

17 Likes
5

it’s the other way around. They collapse vertically and not horizontally.
Margin Top and Bottom collapse. Margin left and right don’t.

from codecademy class:

“[…] top and bottom margins, also called vertical margins, collapse , while top and bottom padding does not.”

18 Likes
6

Can you elaborate a bit? Are you saying that margin collapse was added as a kludge and it’s not required because you can do something like this instead?

7

I’m completely new to coding so I’m not sure if this answer is correct, but I was thinking this:

The width of a page is often predetermined to be a specific amount, while the height of a page may depend on your content and can continue as you’re scrolling down.

So for horizontal margins it may be most convenient to calculate exactly how everything will fit on the page simply by adding up the total sizes of each box. If boxes would collapse horizontally that might make the calculation less intuitive especially if you got many boxes, you have to think about which one is bigger and which one would collapse and so on, instead of just adding them all up.

Vertically on the other hand you may not really care how things line up exactly between the top and the bottom of the page since you can scroll down anyway… all you may care about is that there is a certain vertical margin between two elements, so you just set that margin on your element and if the other element’s margin is shorter thatone can just collapse into it. The collapsing can also help avoid extra unnecessary white space so you don’t have to scroll as much.

42 Likes
8

I like this.

Block elements in CSS treat the vertical and horizontal directions differently (a block element takes up a whole row, or horizontal end-to-end).

Your answer helped solidify my mental model that the vertical and horizontal directions should not be thought of as interchangeable.

For additional support, it’s a convention that you scroll up and down, and not side to side, although ‘from first principles’ there’s no reason it couldn’t be the other way around. But it’s not: apps are expected to have fixed horizontal space but not fixed vertical space. So it’s more important not to ‘mess with’ the horizontal direction–so, collapsing horizontal margins is a no-no.

6 Likes
9

… but the determination reached by the recommending bodies was to have DIV (block element) reach 100% of display port width. The content then unravels like tissue paper.

5 Likes
10

If we have two elements, one right after the other, is there any reason we should write both bottom-margin of the first element and top-margin of the second element since only one of them (the largest) is going to be represented?

Wouldn’t it be better to just specify one of them (the largest) since the shortest won’t have any effect?

2 Likes
11

It depends I think. If you’re sure these elements will always stay only aligned with each other like that then you don’t need to specify both. But for example if you remove one or add something in between in the future or if you got a dynamic website that changes based on user-input or device or browser-window or whatever, then it could be useful to have both margins.

4 Likes
12

Prevention is a good reason.

13

Lets understand this with an example, Suppose you set a border to an element inn your html then,the padding rule will increase the distance between the border and your element. Whereas, if you use the margin rule then it will increase the distance between your elements but the distance between the border of your element and its content will remain the same.

6 Likes
14

This is the short and sweet way of getting the concept of how padding and border works to my mind. Thank you for expressing it.

15

Look at a typical personal blog site. Your explanation describes how words and pictures get placed/arranged in many of them perfectly.

16

Beg to differ. Padding is inside the content area, meaning inside the border. However, it is not between the border and the element. How can it be? It’s inside. But it does pad out the content area of the element. That means it will increase the height and/or width of the content area.

Margin is outside of the content area AND the border. When in a constrained parent element it will decrease the size of the content box height and/or width.

Introduction to the CSS basic box model - CSS: Cascading Style Sheets | MDN

1 Like
17

How is margin collapsing affected by flexbox styling? Or is it affected at all?

18

This wording can be a bit confusing. However, the vertical margins are, in fact, on the horizontal line of an element and the horizontal margin is on the vertical line of an element

19

Brilliant explanation. Even if it’s not 100% accurate, you’ve worded what I couldn’t formulate.

1 Like
20

The following quotes contradict each other:

There is no reason for collapsing

it is because someone thought it should be like that

This is a bad response to the question. In fact, the answer itself does not answer the motivation behind collapsing margins either. The following link provides a good motivation to it:

20 Likes