独立开发问题记录-margin塌陷

殳世英 · 11 小时前

一、概述

往事如风，一周就过去了。
上周在Figma里指点江山，这周在前端代码里卑微搬砖。
回想上周，在Figma中排列组合，并且精确到1像素。每设计出一个页面，成就感就蹭蹭往上涨。
没想到还没沾沾自喜多久，这周就要在前端代码中疯狂填坑。上周设计的多好看，这周就有多头疼。（设计稿存活率：70%）
当然也想面向cursor编程，可是，细节方面还是不到位，得一遍遍跟它沟通才有可能达到效果。然后一看时间，3小时过去了。
二、问题产生

事情是这样的：我精心设计了一个卡片列表，美滋滋地给每个卡片加了个margin-bottom: 20px。
想象着它们每个离底部元素有20px的距离。结果，好像跟我想的不一样。
最后一个卡片跟底部紧紧相连，仿佛失散多年的亲兄弟，说好的20px间距呢？
反倒是整体的卡片列表，一起被顶上去20px，我的设计稿在屏幕上发出无声的嘲笑。
查资料？哦，原来这叫“Margin塌陷”—— 第一个子元素的上 margin 会作用在父元素上，最后一个子元素的下 margin 会作用在父元素上。
三、问题举例

为了举例这个场景，我写了个demo，具体代码如下；

这是第一个内层元素
这是第二个内层元素
这是第三个内层元素

复制代码

最终展现的页面，id为inner2和inner3的div，margin-top生效了，但是id为inner1的div，margin-top没有生效，反倒是父容器#outer，距离浏览器视口顶端50px。

同理，将每个inner的子元素添加50px的margin-bottom，最后一个元素的margin-bottom没有生效，作用到了父元素的margin-bottom上。
四、解决方式

1、给父元素设置padding

同上述案例，在#outer父元素增加一个padding，代码如下；

#outer {
background-color: lightblue;
width: 400px;
padding: 1px;
}

复制代码

这样操作，就可以使得第一个子元素的margin-top和最后一个子元素的margin-bottom不被父元素给吞并。
查看下效果，已经正常展示了；

2、父元素设置border

还是同一个案例，我把父元素加上border边框，代码如下；

#outer {
background-color: lightblue;
width: 400px;
border: 1px solid black;
}

复制代码

这样也能解决问题，不过出现一个新问题，父元素有边框，有时候会影响页面的美观

所以，一般我不用这种处理方式，除非正好是有加边框的场景。
3、父元素设置css样式，overflow: hidden

总的来说，这种方式是最优的一种，可以很优雅的解决此类问题，代码如下；

#outer {
background-color: lightblue;
width: 400px;
overflow: hidden;
}

复制代码

我最终用的就是这种方式解决的问题，因为比较优雅。
五、写在最后

问题以及处理方式记录结束，又要继续投入产品开发，毕竟自己手把手设计的页面，绞尽脑汁也得去实现。
后续我也会一步步记录开发过程中遇到的一些问题，以及最终的处理方案：有技术相关的，也有大模型调研相关的，也会有独立开发过程中的一些心得，还有。。。
毕竟，除了开发，记录和分享，也是一个很棒的过程。

文档仓库：
https://gitee.com/cicadasmile/butte-java-note
源码仓库：
https://gitee.com/cicadasmile/butte-mound

复制代码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册