CSS外边距合并及解决办法

devtools/2024/11/13 8:14:45/

在CSS中,外边距合并(Margin Collapsing)是一种当两个或多个元素的垂直外边距相遇时,它们合并成一个外边距的现象。这个合并后的外边距的大小等于两个外边距中较大的那个,或者在某些情况下,等于它们之和。外边距合并主要发生在垂直方向,水平方向上的外边距不会合并。

外边距合并的常见场景包括:

  1. 相邻兄弟元素
    当两个兄弟元素(即同一父元素下的相邻子元素)的垂直外边距相遇时,它们会合并。

    <div class="container"><div class="box1"></div><div class="box2"></div>
    </div>
    
    css">.box1 {margin-bottom: 20px;
    }.box2 {margin-top: 30px;
    }
    

    在这种情况下,.box1.box2 之间的外边距将合并为 30px(取较大值)。

  2. 父元素和第一个/最后一个子元素
    父元素的外边距与其第一个或最后一个子元素的垂直外边距相遇时,也会发生合并。

    <div class="parent"><div class="child"></div>
    </div>
    
    css">.parent {margin-top: 40px;
    }.child {margin-top: 20px;
    }
    

    在这种情况下,.parent.child 之间的外边距将合并为 40px(取父元素的外边距)。

  3. 空块级元素
    如果块级元素不包含任何内容,也不包含边框和内边距,其上下外边距也会合并。

    <div class="empty-box"></div>
    <div class="content-box"></div>
    
    css">.empty-box {margin-bottom: 50px;
    }.content-box {margin-top: 60px;
    }
    

    在这种情况下,.empty-box.content-box 之间的外边距将合并为 60px(取较大值)。

阻止外边距合并

有几种方法可以阻止外边距合并:

  1. 使用浮动(Float)
    浮动元素不会与其他元素合并外边距。

    css">.box1 {float: left;margin-bottom: 20px;
    }.box2 {clear: both;margin-top: 30px;
    }
    
  2. 使用内边距(Padding)
    可以通过在父元素或子元素上使用内边距来避免外边距合并。

    css">.parent {padding-top: 1px; /* 任意非零值 */
    }.child {margin-top: 20px;
    }
    
  3. 使用边框(Border)
    给元素添加边框可以防止外边距合并。

    css">.parent {border-top: 1px solid transparent; /* 透明边框 */
    }.child {margin-top: 20px;
    }
    
  4. 使用 overflow 属性
    给父元素设置 overflow: auto;overflow: hidden; 可以创建块格式化上下文(BFC),从而阻止外边距合并。

    css">.parent {overflow: auto;
    }.child {margin-top: 20px;
    }
    

http://www.ppmy.cn/devtools/132804.html

相关文章

高级 <HarmonyOS主题课>构建华为支付服务的课后习题

五色令人目盲&#xff1b; 五音令人耳聋&#xff1b; 五味令人口爽&#xff1b; 驰骋畋猎&#xff0c;令人心发狂&#xff1b; 难得之货&#xff0c;令人行妨&#xff1b; 是以圣人为腹不为目&#xff0c;故去彼取此。 本篇内容主要来自&#xff1a;<HarmonyOS主题课>构建…

【模拟集成电路】知识点笔记_1

知识点笔记_1 零极点相关1 PM和GM相关概念2零极点 温度系数五种常见噪声源MOS管和BJT选取BJT刨面图工艺角衬底主要噪声来源共模反馈三种常用CMFB1 工作在线性区MOS作为CMFB&#xff08;匹配决定输出电压&#xff09;2 电阻反馈&#xff08;Buf&#xff09;3 电流差分对&#xf…

ffmpeg命令——从wireshark包中的rtp包中分离h264

ffmpeg命令——从wireshark包中的rtp包中分离h264 过滤 RTP打开wireshark的RTP 播放器选中流并导出荷载使用 ffmpeg 命令行分离出 h264 过滤 RTP 打开wireshark的RTP 播放器 选中流并导出荷载 使用 ffmpeg 命令行分离出 h264 ffmpeg -i test.raw -vcodec copy -an -f h264 tes…

软考:论运维

运维是什么&#xff1f; 运维是指软件运行上线后&#xff0c;对应用程序进行的一系列维护和管理活动。系统的维护、监控和管理。 为什么要运维&#xff1f; 运维的目的是确保应用程序的稳定运行、性能优化和安全防护。运维的范围非常广泛&#xff0c;包括硬件、软件、网络和安…

科研绘图系列:R语言组合多个不同图形(violin density barplot heatmap)

文章目录 介绍加载R包数据下载函数图1: Boxplots导入数据数据预处理画图图2: Violin导入数据数据预处理画图图3: Density plots per habitat数据预处理画图图4: Density plots per depth数据预处理画图图5: bar plot准备颜色导入数据数据预处理数据预处理画图图6: Mantel Heat…

SystemC学习(4)— 在VCS中运行SystemC

SystemC学习&#xff08;4&#xff09;— 在VCS中运行SystemC 一、前言 参考&#xff1a;VCS编译verilog&SystemC 二、仅包含SystemC的仿真 源文件使用上一篇&#xff1a;SystemC学习&#xff08;3&#xff09;— APB_SRAM的建模与测试 编写makefile如下所示&#xff…

在gitlab,把新分支替换成master分支

1、备份master分支&#xff0c;可以打tag 2、删除master分支 正常情况下&#xff0c;master分支不允许删除&#xff0c;需要做两个操作才能删除 a、变更项目默认分支为非master分支&#xff0c;可以先随便选择 b、取消master为非保护分支 操作了上述两步&#xff0c;就可以删…

从零创建vue+elementui+sass+three.js项目

初始化&#xff1a; vue init webpack projectnamecd projectnamenpm install支持sass: npm install sass --save-dev npm install sass-loader7.1.0 --save-dev npm install node-sass4.12.0 --save-devbuild/webpack.base.conf.js添加 rules: [...,{test: /\.scss$/,loade…