微信小程序 css margin 问题

Question

微信小程序css margin 怪异问题

如图及代码所示，当增加.list上边距时，比如上边距由20变为120 margin: 120px 0 0 0;，就会出现顶部bar白色区域下拉的情况，这是什么原因？

<view class="container">
    <view class="list">
       66666666666666666666666666666
    </view>
</view>


.container {
    background-color: #e98737;
    color: #333;
    font-size: 16px;
    height: 100%;
}
.list {
    margin: 20px 0 0 0;
    padding: 10px;
    background-color: rgb(161, 224, 228);
    border-radius: 5px;
}​

Answer 1

这是一个css margin 塌陷问题,不止小程序会有,具体见margin塌陷

1. .container没设置高度时.list的margin-top没有把.container撑开
2. .container设置了高度时.list的margin-top跑到.container外面去了

都叫做margin塌陷
你把塌陷问题解决了
就符合你的预期了

代码片段:https://developers.weixin.qq.com/s/flaLmDmB70x9

代码片段的margin塌陷效果: