1024问

元芳，你怎么看CSS中的margin合并？

Peren ·
更新时间:2024-11-14
· 946 次阅读

什么是margin合并？

块级元素的上外边距（通常）与下外边距有时会合并为单个外边距，这样的现象称为“margin合并”。

从定义上，我们可以看出如下两点：

块级元素。但不包括浮动（float）和绝对定位（relative）元素——尽管这二者可以使元素块级化； 只发生在垂直方向。严格来说，应该是【只发生在和当前文档流方向的相垂直方向上】——但是默认文档流是水平的

这一幕，让我不禁想起了BFC：有记为证
传说，只要满足了以下任一要求即可触发BFC：

body 根元素 浮动元素：float 除 none 以外的值 绝对、固定定位元素：position (absolute、fixed) display 为 inline-block、table-cells、flex overflow 除了 visible 以外的值 (hidden、auto、scroll)

可见，BFC和margin合并之间有些相似：作用于“流”、对元素与“其他元素”位置有影响

原创文章 198获赞 530访问量 10万+ 关注 私信 展开阅读全文
作者：云小梦



margin CSS

1024 个赞
编辑 举报
需要 登录 后方可回复, 如果你还没有账号请 注册新账号
相关文章
Java 正则表达式
Laurie 2020-11-30
811
Go 语言环境安装
Marmara 2020-12-06
630
css实现简易报警灯的示例代码
Antonia 2023-02-26
248
CSS-@规则(At-rules)常用语法使用总结
Elina 2023-02-26
287
html+css设计两个摆动的大灯笼
Thalia 2023-02-26
1458
CSS3使用双旋转实现福到了的迎春喜庆特效代码
Olinda 2023-02-26
1901
CSS3实现一根心爱的二踢脚示例代码
Bunny 2023-02-26
23
利用css动画实现节流
Kefira 2023-02-26
562
CSS动画实现跳动的足球(疯狂世界杯)
Jacinthe 2023-02-26
865
CSS样式覆盖的操作代码
Viridis 2023-02-26
166
css实现文字充电效果的示例代码
Tertia 2023-02-26
443
使用canvas制作炫酷黑客帝国数字雨背景html+css+js
Elina 2023-03-29
1421
关于CSS渲染:CSS是如何绘制颜色的
Querida 2023-04-14
183
CSS中height:100vh和height:100%的区别
Serafina 2023-04-19
951
CSS实现鼠标悬停svg图标描边效果
Rhea 2023-04-19
734
36种漂亮的CSS3网页按钮Button样式(主要结合before与after)
Malinda 2023-04-19
935
纯CSS实现了下划线的交互动画效果
Kathy 2023-04-19
677
CSS 实现块级元素靠右的方法
Nora 2023-04-19
653
纯CSS实现鼠标悬停图片上升显示描述案例
Pandora 2023-04-19
1001
基于css实现炫酷按钮动画效果案例代码
Tani 2023-04-19
1624