Css Margin Collapsing

.container {  overflow:auto;  border:2px solid;}span {  float:left;  width:100px;  height:100px;  background:red;  opacity:0.2;}.container > div {  height:60px;  margin:20px 0;  background:blue;}b {  display:block;  clear:left;}

<p><strong>View this in Firefox</strong></p><div class="container">  <span></span>  <div></div>  <b></b>  <div></div></div>

CSS margins not collapsing

CSS margin collapsing only occurs vertically & under 3 circumstances:

Adjacent siblings: The margins of adjacent siblings are collapsed (except when the later sibling needs to be cleared past floats). For example:

<p>The bottom margin of this paragraph is collapsed...</p>
<p>...with the top margin of this paragraph.</p>

Parent and first/last child: If there is no border, padding, inline content, block_formatting_context created or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

Empty blocks: If there is no border, padding, inline content, height, or min-height to separate a block's margin-top from its margin-bottom, then its top and bottom margins collapse.

Take a look at Margin Collapsing here in MDN.

In your case they won't collapse, you'd better applying margin to only one side excluding last item in the row:

aside {
  float: left;
  background-color: yellow;
  width: calc(20% - 10px);
  margin-right: 5px;
  padding: 10px;
  box-sizing: border-box;
}

aside.last {
  margin-right: 0;
}

How works margin collapsing with min-height?

That version of the Specification is probably a bit confusing. You can check the updated version (2.2) where the main rule is:

both belong to vertically-adjacent box edges, i.e. form one of the following pairs:

...

• bottom margin of a last in-flow child and bottom margin of its parent if the parent has 'auto' computed height

Then the rule you quoted will become:

The bottom margin of an in-flow block box with a 'height' of 'auto' collapses with its last in-flow block-level child's bottom margin, if:

• the box has no bottom padding, and
• the box has no bottom border, and
• the child's bottom margin neither collapses with a top margin that has clearance, nor (if the box's min-height is non-zero) with the box's top margin.

The min-height is no longer there.

As a side note, the rule you quoted is an implication of the main rules listed above where there is nothing about min-height so having a margin collapsing in case of min-height different from auto won't be a surprise for me if it happens (even if it's non intuitive).

UPDATE

A related old question Margin collapsing with floated element, why there is an extra margin added?. It's now an irrelevant one since we cannot reproduce the behavior but margin-collapsing was occuring in all the cases even if the min-height was bigger than the childs height.

I guess the vertically-adjacent box edges is the key to understand what is happening. If a min-height make both elements no more adjacent then no margin collapsing will occur (which is logical), otherwise you will have margin collapsing (like in your example).

Does CSS grid suppress margin collapse inside grid items?

From the specificaton:

A grid item establishes an independent formatting context for its contents. However, grid items are grid-level boxes, not block-level boxes: they participate in their container’s grid formatting context, not in a block formatting context.

and

Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.^ref

So margin inside a grid item cannot collapse with the margin of the grid item that are outside

You can have margin collapsing inside the grid if all the concerned margin are inside

main {
  display: grid;
}

section {
  margin: 25px 0;
  outline: 1px solid red;
}

div {
  margin: 25px 0;
  outline: 1px solid blue;
}

<main>
  <section>
    <div>X</div>
    <div>X</div>
  </section>
</main>