兄弟元素，垂直方向上外边距重叠（塌陷）

记录，仅供参考

html

<view class="parent">
    <view class="child1"></view>
    <view class="child2"></view>
</view>

css

	.parent {
		width: 150px;
		border: solid;
	}

	.child1,
	.child2 {
		width: 150px;
		height: 150px;
	}

	.child1 {
		background: #499a91;
		margin-bottom: 50px;
	}

	.child2 {
		background: #F0AD4E;
		margin-top: 50px;
	}

效果

这里第一个子元素给了50px下外边距，第二个子元素给了50px上外边距，效果中外边距合并，只有50px

解决方法：

给子元素添加属性：display: inline-block;
效果

这里可以看到由于将子元素变成了行内块元素，页面中出现空白。

给子元素添加属性：vertical-align: top; 即可解决。