当前位置：首页 > news >正文

[css]margin-top不起作用问题（外边距合并）

news 2025/7/12 10:55:11

在初学css时，会遇到突然间margin-top不起作用的情况。如下面：
情况一：
代码：

<html>
<head><style type="text/css">
* {margin:0;padding:0;border:0;
}#outer {width:300px;height:300px;background-color:red;
}#inner {width:50px;height:50px;background-color:blue;margin-top:20px;
}</style>
</head><body><div id="outer"><div id="inner"></div>
</div></body>
</html>

根据以上代码推测，理想的状态下应该是outer元素外边距top是0,inner元素相对outer有一个20px的外边距top:20px。但是，看下面结果。

效果图：
明明只给inner元素设置了外边距： margin-top:20px;，而outer元素也跟着设置了外边距top:20px。
在这里插入图片描述
情况二：
代码：

<html>
<head><style type="text/css">
* {margin:0;padding:0;border:0;
}#father {width:300px;height:300px;background-color:red;margin-bottom:50px;
}#sun {width:50px;height:50px;background-color:blue;margin-top:20px;
}</style>
</head><body><div id="father"></div><div id="sun"></div></body>
</html>

理想的效果应该是father元素和sun元素之间的间距应该为20px+50px。但是结果是：50px，效果图如下：
在这里插入图片描述
上面的情况一叫做外边距塌陷，情况二叫做外边距合并。
外边距塌陷：两个嵌套关系的（父子关系）块元素，当父元素有上外边距或者没有上外边距（margin-top），子元素也是有上外边距的时候。两个上外边距合并成一个上外边距，以值较大的上外边距值为准。
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

外边距塌陷解决办法：
1、给父元素设置外边框border或者设置内边距padding
示例：以情况一为示例
代码：

<html>
<head><style type="text/css">
* {margin:0;padding:0;border:0;
}#outer {width:300px;height:300px;background-color:red;border:1px solid #202124;
}#inner {width:50px;height:50px;background-color:blue;margin-top:20px;
}</style>
</head><body><div id="outer"><div id="inner"></div>
</div></body>
</html>

给outer元素添加： border:2px solid #202124
效果图：
在这里插入图片描述
2、触发BFC
BFC:Block Formatting Context，块级格式化上下文。在outer元素中添加overflow:hidden。

<html>
<head><style type="text/css">
* {margin:0;padding:0;border:0;
}#outer {width:300px;height:300px;background-color:red;overflow:hidden
}#inner {width:50px;height:50px;background-color:blue;margin-top:20px;
}</style>
</head><body><div id="outer"><div id="inner"></div>
</div></body>
</html>

效果图：
在这里插入图片描述
外边距合并问题解决：
1、只给其中一个元素设置margin值就行
2、给每个元素添加父元素，将外边距合并问题转化为外边距塌陷问题，然后用解决外边距塌陷问题办法去解决，这样就完美解决问题。这个思路有点意思。转化问题，在解决。

现在来讨论一下外边距合并问题带来的好处：
w3school中举个例子：
外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。
在这里插入图片描述

[css]margin-top不起作用问题（外边距合并）

相关文章：

[css]margin-top不起作用问题（外边距合并）

Vue2基础八、插槽

自然语言处理从入门到应用——LangChain：提示（Prompts）-[提示模板：连接到特征存储]

jenkins自定义邮件发送人姓名

SolidWorks二次开发---简单的连接solidworks

docker 安装 active Mq

【Linux】TCP协议

DevOps系列文章之自动化测试大全（单测和集成测试）

Android启动速度优化

linux 日志系统安全日志 web日志

SpringBoot 整合 MongoDB 连接阿里云MongoDB

Debeizum 增量快照

windows下安装composer

企业游学进华秋，助力电子产业创新与发展

玩转Tomcat：从安装到部署

吃透《西瓜书》第四章决策树定义与构造、ID3决策树、C4.5决策树、CART决策树

复现宏景eHR存在任意文件上传漏洞（0day）

unity连接MySQL数据库并完成增删改查

13个ChatGPT类实用AI工具汇总

1-linux下mysql8.0.33安装

19c补丁后oracle属主变化，导致不能识别磁盘组

1688商品列表API与其他数据源的对接思路

NFT模式：数字资产确权与链游经济系统构建

3403. 从盒子中找出字典序最大的字符串 I

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

使用 SymPy 进行向量和矩阵的高级操作

回溯算法学习

BLEU评分：机器翻译质量评估的黄金标准

MySQL的pymysql操作

Qt的学习（二）