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

一、概述

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

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

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

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

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

二、问题产生

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

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

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

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

查资料?哦,原来这叫"Margin塌陷"------ 第一个子元素的上 margin 会作用在父元素上,最后一个子元素的下 margin 会作用在父元素上。

三、问题举例

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

html 复制代码
<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,代码如下;

html 复制代码
#outer {
    background-color: lightblue;
    width: 400px;
    padding: 1px;
}

这样操作,就可以使得第一个子元素的margin-top和最后一个子元素的margin-bottom不被父元素给吞并。

查看下效果,已经正常展示了;

2、父元素设置border

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

html 复制代码
#outer {
    background-color: lightblue;
    width: 400px;
    border: 1px solid black;
}

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

所以,一般我不用这种处理方式,除非正好是有加边框的场景。

3、父元素设置css样式,overflow: hidden

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

html 复制代码
#outer {
    background-color: lightblue;
    width: 400px;
    overflow: hidden;
}

我最终用的就是这种方式解决的问题,因为比较优雅。

五、写在最后

问题以及处理方式记录结束,又要继续投入产品开发,毕竟自己手把手设计的页面,绞尽脑汁也得去实现。

后续我也会一步步记录开发过程中遇到的一些问题,以及最终的处理方案:有技术相关的,也有大模型调研相关的,也会有独立开发过程中的一些心得,还有。。。

毕竟,除了开发,记录和分享,也是一个很棒的过程。

plain 复制代码
文档仓库:
https://gitee.com/cicadasmile/butte-java-note

源码仓库:
https://gitee.com/cicadasmile/butte-mound
相关推荐
yanlele2 分钟前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子1 小时前
React状态管理最佳实践
前端
烛阴1 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子1 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...2 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
天天扭码2 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html
xw52 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !2 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
Burt2 小时前
tsdown vs tsup, 豆包回答一坨屎,还是google AI厉害
前端
群联云防护小杜3 小时前
构建分布式高防架构实现业务零中断
前端·网络·分布式·tcp/ip·安全·游戏·架构