Collapsing margins

As speaking margin is used to keep away other elements while padding is used for distance between border and element.

using margin in one direction will save a lot of headaches. just decide to use margin-top or margin-bottom and use the chosen one for all the elements.

imagine you are using only margin-bottom to all of your elements and never use the top one, you now don’t have to think if there will be a collapse or not because there are no two margins intersect together, there is only one.

and also this practice will be good for horizontal margins.

1 Like

It’s also important to remember that:
The top or bottom margin of an element collapses when it touches the margin of its first child element.

Image for post

Image for post

If an element has no height, padding, or border and all of its children elements’ margins collapse, it will take up no (vertical) space.

Without collapsing, positioning these elements like that on a web page would cause quite a headache!

1 Like

Oh my goodness this answer is so helpful i made an account to show you some love. Thank you for providing a wonderful way of understanding the logic behind why margins only collapse vertically T.T

2 Likes

You have explained in an elaborate way. You have explained how vertical collapsing is happening in practice and horizontal is not. But I will re-phrase the question. Why is it decided that the vertical margins will collapse and the horizontal would not?

With responsive/adaptive design the width shrinks and stretches so there is no need for horizontal scrolling. Collapsing margins means less vertical scrolling.

1 Like