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

一、概述

往事如风，一周就过去了。

上周在Figma里指点江山，这周在前端代码里卑微搬砖。

回想上周，在Figma中排列组合，并且精确到1像素。每设计出一个页面，成就感就蹭蹭往上涨。

没想到还没沾沾自喜多久，这周就要在前端代码中疯狂填坑。上周设计的多好看，这周就有多头疼。（设计稿存活率：70%）

当然也想面向cursor编程，可是，细节方面还是不到位，得一遍遍跟它沟通才有可能达到效果。然后一看时间，3小时过去了。

二、问题产生

事情是这样的：我精心设计了一个卡片列表，美滋滋地给每个卡片加了个margin-bottom: 20px。

想象着它们每个离底部元素有20px的距离。结果，好像跟我想的不一样。

最后一个卡片跟底部紧紧相连，仿佛失散多年的亲兄弟，说好的20px间距呢？

反倒是整体的卡片列表，一起被顶上去20px，我的设计稿在屏幕上发出无声的嘲笑。

查资料？哦，原来这叫“Margin塌陷”—— 第一个子元素的上 margin 会作用在父元素上，最后一个子元素的下 margin 会作用在父元素上。

三、问题举例

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

<div id="outer">
    <div id="inner1">
        这是第一个内层元素
    </div>
    <div id="inner2">
        这是第二个内层元素
    </div>
    <div id="inner3">
        这是第三个内层元素
    </div>
</div>

<style>
    #outer {
        background-color: lightblue;
        width: 400px;
    }

    #inner1 {
        background-color: yellowgreen;
        width: 100px;
        margin-top: 50px;
    }

    #inner2 {
        background-color:gray;
        width: 100px;
        margin-top: 50px;
    }

    #inner3 {
        background-color:blue;
        width: 100px;
        margin-top: 50px;
    }
</style>

最终展现的页面，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