CSS外边距合并现象

外边距合并(Margin Collapsing)是指在文档流中,两个或多个相邻元素的外边距(margin)会合并为一个外边距,其大小会取其中最大的外边距值

当两个相邻的兄弟元素之间没有其他内容(如边框、内边距、行内元素等)分隔时,它们的垂直外边距会发生合并

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            width: 100px;
            height: 100px;
            background-color: brown;
            margin-bottom: 80px;
        }
        .two {
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two"> two</div>
    
</body>
</html>

第一个 div元素的 margin - bottom 为 80px,第二个 div 元素的 margin - top 为 50px,最终它们之间的外边距会合并为 80px。

相关推荐
喧星Aries11 分钟前
进程调度的时机,切换与过程方式(操作系统OS)
java·服务器·前端·操作系统·进程调度
海底火旺13 分钟前
useState:批处理与函数式更新
前端·react.js·面试
亿万托福15 分钟前
数字世界的构筑之艺:前端技术栈的浅描与远瞻
前端
用户408128120038115 分钟前
JWT 和 token 区别
前端
盏茶作酒2916 分钟前
打造自己的组件库(三)打包及发布
前端·vue.js
单休好_好就好在比双休少一天17 分钟前
Vite打包从12.17M -> 7.95M,速度提升≈51.85%
前端·javascript
yinke小琪17 分钟前
JavaScript DOM内容操作常用方法和XSS注入攻击
前端·javascript
归于尽17 分钟前
从 TodoList 看自定义 Hook 的设计思想
前端
G等你下课17 分钟前
如何优雅地组织业务逻辑?自定义 Hook 全解析
前端·react.js
刘坤1518 分钟前
封装axios二方包
前端·http