独立开发问题记录-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
相关推荐
β添砖java1 小时前
CSS网格布局
前端·css·html
木易 士心3 小时前
Ref 和 Reactive 响应式原理剖析与代码实现
前端·javascript·vue.js
程序员博博3 小时前
概率与决策 - 模拟程序让你在选择中取胜
前端
被巨款砸中3 小时前
一篇文章讲清Prompt、Agent、MCP、Function Calling
前端·vue.js·人工智能·web
sophie旭3 小时前
一道面试题,开始性能优化之旅(1)-- beforeFetch
前端·性能优化
Cache技术分享3 小时前
204. Java 异常 - Error 类:表示 Java 虚拟机中的严重错误
前端·后端
uhakadotcom3 小时前
execjs有哪些常用的api,如何逆向分析网站的加签机制
前端·javascript·面试
ObjectX前端实验室3 小时前
【图形编辑器架构】:无限画布标尺与网格系统实现解析
前端·canvas·图形学
你的电影很有趣4 小时前
lesson71:Node.js与npm基础全攻略:2025年最新特性与实战指南
前端·npm·node.js
闲蛋小超人笑嘻嘻4 小时前
find数组方法详解||Vue3 + uni-app + Wot Design(wd-picker)使用自定义插槽内容写一个下拉选择器
前端·javascript·uni-app