那天下午我跟簡坐在學校操作草地上聊天

夕陽的余暉照射著我們

陽光在青草的縫隙間拉長了倒影

溫暖的晚風輕拂著簡劉海前的幾根發絲

淡淡的發香迎面撲來，我望著遠山上的煙囪。

對簡說： 我覺得我們坐得太近了。感覺相距 50cm 比較好。

簡一臉驚訝說：為什么啊？

我說：距離產生美啊！，坐太近，你臉上的痘印很顯眼。

簡生氣的說：哼！那我還是離你 100 cm 比較好，你不覺得你臉上的麻子比較顯眼嗎？

說完，簡就坐到距離我 100cm 遠的地方去了，然后賭氣似的把臉轉到另一邊去了。 我看著遠方煙囪冒出的縷縷白煙,明白了一個道理，然后寫下了如下 CSS 代碼。

<template><div class="grassground"><boy id="me"/><girl id="jian"/></div>
</template>
<style>
#me{margin-bottom:50cm;
}
#jian{margin-top: 100cm;
}
</style>
復制代碼

我們之間的距離是 100cm 而不是 100cm + 50cm = 150cm。

因為我想起了我最討厭的 CSS Bug 級奇怪的特性，margin-top 和 margin-bottom 會出現 margin collapsing 的現象。

參考 ：Master margin collapsing