Help on margin collapsing

HTML-CSS
1

If an element has no content, padding, or border, its top and bottom margins can collapse into a single margin.

<style>
  .empty-block {
    margin-top: 20px;
    margin-bottom: 10px;
    height: 0;
  }
  .next-block {
    background-color: lightgray;
  }
</style>

<div class="empty-block"></div>
<div class="next-block">Next block</div>

In this example the empty-blocks top and bottom margins collapse into a single 30 pixels margin, the larger of the two.

On the text above it should be 20px if it is the larger of the 2 margins. I don’t get it.

2

this the link of the page:

3

I’m thinking that’s a typo in the transcript and should read, “In this example the empty-block s top and bottom margins collapse into a single 20 pixels margin, the larger of the two.”

Would you be willing to create an issue for this at Issues · FreeCodeCamp/FreeCodeCamp?