前陣子在動手弄 css 的東西，才注意到 flex 有很多不太一樣的設計，對於學過「以前的標準」的人來說會比較意外，就像標題提到的...
我在 JS Fiddle 上面做了一個範例可以測試，裡面有兩組 container，第一組就很標準的 div 設定為 100x100 的大小，然後 margin 設為 10px。
可以看到第一組裡面，上下 block 的 margin 會「疊」起來 (也就是上面 block 的 margin-bottom 與下面 block 的 margin-top 疊起來)，變成 10px，而不是分開算的 20px。
這個特性可以用「margin collapsing」查到，在 MDN 上甚至有一篇「Mastering margin collapsing」可以看，而這個特性對於老人來說已經用習慣了...
但如果用 flex 實作時 (display: flex; 以及 flex-direction: column;)，會發現所有的 margin 都是自己計算而不會疊加，這點在 W3C 的文件「CSS Flexible Box Layout Module Level 1」裡面有提到：
For example, floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents.
這個特性無法被改變，取而代之的是用 gap 這個 property 設定元素之間的間格。