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。

相关推荐
ygming几秒前
Hashmap/ Hashset- Q39~Q42内容
前端·算法
多啦C梦a几秒前
【前端必修】闭包、`this`、`箭头函数`、`bind`、节流,一篇文章全懂!
前端·javascript·html
归于尽几秒前
为什么别人用闭包那么溜?这 8 个场景照着用就对了
前端·javascript·面试
Hilaku3 分钟前
Vue 2与Vue 3响应式原理的对比与实现
前端·javascript·vue.js
自出洞来无敌手(曾令瑶)8 分钟前
浏览器 实时监听音量 实时语音识别 vue js
前端·javascript·vue.js·语音识别
在钱塘江25 分钟前
《你不知道的JavaScript-上卷》-笔记-5-作用域闭包
前端
搬砖码25 分钟前
Vue病历写回功能:实现多输入框内容插入与焦点管理🚀
前端
Canaan28530 分钟前
前端开发-标签
html
不简说30 分钟前
史诗级更新!sv-print虽然不是很强,但却是很能打的设计器组件
前端·产品
用户952511514015530 分钟前
最常用的JS加解密场景MD5
前端