Yes, these two are supposed to do the same, because in the first rule set value 0 is used for top and bottom margin while 1.5em is used for left and right margin.

In the second rule set these values are defined explicitly.

Remember the order of values: top right bottom left.

“If fewer than four values are set, the missing values are assumed based on the ones that are defined. For example, the following two rule sets would get identical results:

.box {
  margin: 0 1.5em;
}

.box {
  margin: 0 1.5em 0 1.5em;
}

Are these two supposed to do the same? Because that is not correct. Or am I not reading this correctly?

References:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-end

Moath, remove the <br> and make the img tags be display:block; and it’ll fix your double margins. Ideally, you wouldn’t margin your image and you would instead margin its wrapper (like if you stuck the image in a <figure>).

EXAMPLE-1(NO Collapse):

HTML:

<img id="code-1" src="..."> <br>
<img id="code-2" src="...">

CSS:

#code-1{margin: 0 0 20px 0;}
#code-2{margin: 10px 0 0 0;}

This code above will result in a 30px margin (20+10).

EXAMPLE-2(Collapse- same example given in this article):

HTML:

`<h2>Collapsing Margins</h2>`
`<p>Example text.</p>`

CSS:

h2 {
  margin: 0 0 20px 0;
}

p {
  margin: 10px 0 0 0;
}

This will result in a 20px margin (the higher margin).

Please let me know if I am missing something here. Thank you

Already easy got it.Definitely it was my biggest css ahaha moment, unfortunately I can’t delete this post above, what a shame))

I always looked at the collapsing margin as a bug. But you can totally rock this to your advantage especially when building flexible theme layouts where the sequence of elements my change.

I can’t believe I have only just realised this…

“A whole new world… A hundred thousand th…”

I think Ruksun, that it is meant to say “vertical” instead of “horizontal”. If possible that could be changed so as not to confuse a newer designer. :)

“It should also be pointed out that auto is useful only for horizontal centering, and so using auto for top and bottom margins will not center an element vertically, which can be confusing for beginners.”

Livia, just giving two values will result in the first value being used for top and bottom and the second value being used for left and right. If you just set one value it will be used on all (top, bottom, left, right). In both cases margin values that are set before, will be overwritten.

More information about margin on mozilla developer network