距离生产美

[banxi1988]

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

夕阳的余晖照射着我们

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

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

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

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

[zn]

margin 指的是与自身边界的距离，不是与“其他对象”的距离

[zn]

想象一下，A 的 margin 是 10px，B 的 margin 是 20，那么 A、B 排一起的时候，A、B 距离应该是多少？ 10px ？ 20px ？都不合理，所以结果必然是 10+20=30px，这是最合理的方案。

[banxi1988]

@zn #2 30px 不考虑 margin collapsing?
虽然我认为 margin collapsing 是一个很操蛋的特性，但是已经这样了，没有办法。
当出现 margin collapsing 时，margin 的意义就变成了文档流的一个对象距离的请求了。CSS 布局引擎综合双方请求，再根据 margin collapsing 规则来计算出一个值。