因为css的知识比较琐碎，所以特地记录一下工作中踩过的坑
一个简单的答案和解决办法
前两天在工作中踩了个坑，给一个子元素设置了100px的margin-top，然后父元素没有设置border-top和padding-top，原本期待的是父元素能够顶到最上面，然后子元素在父元素内部，和父元素的顶部保持一个100px的距离。但是结果是，子元素的顶和父元素的顶贴在了一起，然后父元素没有顶到最上面，反而被挤下来了100px的距离。
上网了解了一下之后，知道了解决方案是给父元素设置padding-top或者border-top，这样就能达到预期了。
然后我又深入了解了一下，原来是涉及到外边距合并的知识。当两个垂直方向的外边距相遇时会发生合并，二者不会相加，而是合并成二者的较大值（可以理解为两个外边距重叠了）。这个其实我之前就知道，不过之前我知道的情境是兄弟元素之间的外边距合并，上面的margin-bottom和下面的margin-top会合并。但是我才知道，原来父子元素的margin-top也会合并。
而给父元素加伤padding-top和border-top就不会合并，是因为两个垂直外边距中间被border或者padding隔开，因此不会合并。
更进一步探究
而好奇的我不会在此停下，既然说的是合并成二者中的较大值，那如果有一方是负外边距怎么办？负外边距是不是相当于永远不起作用了？
然后我又找啊找，同时自己也试啊试，最终发现了一篇讲的很好的文章图解 外边距合并、负外边距，也能解释我实验的结果
结论就是：当要合并的外边距都为正时，取二者最大值。当一正一负时，正的和负的相抵消，最后为正就是正多少，为负就是负多少。当两个负外边距时，会取绝对值较大的负外边距，作为二者重合多少的标准。
当然，这种情况几乎没有什么用，我觉得也很少会有同时用到负外边距和外边距合并的情况，这么布局多少沾点魔鬼了，平时应该合理使用padding和margin，尽量让布局更加简明易懂
