距离产生美-CSDN博客

那天下午我跟简坐在学校操作草地上聊天

夕阳的余晖照射着我们

阳光在青草的缝隙间拉长了倒影

温暖的晚风轻拂着简刘海前的几根发丝

淡淡的发香迎面扑来，我望着远山上的烟囱。

对简说：我觉得我们坐得太近了。感觉相距 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