微信小程序 css margin 问题

拾光过客
  • 609

微信小程序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;
}​

回复
阅读 614
1 个回答
643104191
  • 422
✓ 已被采纳

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

  1. .container没设置高度.list的margin-top没有把.container撑开
  2. .container设置了高度.list的margin-top跑到.container外面去了
都叫做margin塌陷
你把塌陷问题解决了
就符合你的预期了

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

代码片段的margin塌陷效果:

image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏