You need to enable JavaScript to run this app.
最新活动
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们
火山引擎首页
全站搜索
L
两个兄弟元素的外边距是否必须是相同类型才能发生外边距折叠？

两个兄弟元素的外边距是否必须是相同类型才能发生外边距折叠？

两个兄弟元素的外边距只有在一定条件下才会发生外边距折叠。具体来说，以下条件需要同时满足才会发生外边距折叠：

  1. 兄弟元素必须是垂直排列的，即它们在垂直方向上没有任何非空内容、内边距或边框将它们分隔开。

  2. 兄弟元素的外边距必须是相邻的，即它们没有任何非空内容、内边距、边框或空白将它们分隔开。

如果上述条件不满足，那么这两个兄弟元素的外边距就不会发生折叠。

以下是一个简单的代码示例，演示了外边距折叠的情况：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      margin: 20px;
      background-color: lightgray;
    }
  </style>
</head>
<body>
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
</body>
</html>

在上面的示例中，两个兄弟元素具有相同的外边距，且满足其他条件，因此它们的外边距会发生折叠，最终显示的外边距为20px。如果您更改其中一个div元素的外边距值，您将看到它们的外边距不再折叠。

需要注意的是，外边距折叠只会发生在普通文档流中的块级元素上，对于浮动元素、绝对定位元素、inline-block元素或具有overflow属性的元素，外边距折叠不会发生。

本文内容通过AI工具匹配关键字智能整合而成，仅供参考，火山引擎不对内容的真实、准确或完整作任何形式的承诺。如有任何问题或意见，您可以通过联系service@volcengine.com进行反馈，火山引擎收到您的反馈后将及时答复和处理。
展开更多
icon

开发者特惠

面向开发者的云福利中心，ECS 60元/年，域名1元起，助力开发者快速在云上构建可靠应用
ECS首年60元

社区干货

万字长文带你漫游数据结构世界|社区征文

**数据结构是什么呢?**首先得知道数据是什么?**数据是对客观事务的符号表示**,在计算机科学中是指所有能输入到计算机中并被计算机程序处理的符号总称。那为何加上**“结构”**两字?**数据元素是数据的基本单位... 都是同一个节点,只是为了好看,弄了两份,实际上是同一个节点,有两个指针,比如 1 ,既指向2,也指向5**):![](https://markdownpicture.oss-cn-qingdao.aliyuncs.com/blog/20220108121514.png)两层指针,问题依然存在...

数据库

基于 LoserTree 的 Paimon 多路归并优化

并将相同的 Key 使用 MergeFunction 进行合并,其中每个 RecordReader 的数据是有序的。整个读取过程实际上是对多个 RecordReader 的数据进行多路归并。在归并过程中,数据之间的比较次数越多,整体排序耗时越高。... 如果父子节点进行比较后发生了数据交换,那么会产生自顶向下的调整,这种调整每次都需要和两个子节点同时进行比较。1. **建堆**假设有 5 个待排序列,第一步需要将这 5 个待排序列的按照头元素的大小调整为小...

技术

如何搭建清晰易懂的数据看板?|社区征文

分以下两个步骤。### **📌 明确看板阅读者角色(who to present)** :不同角色的用户对于数据看板的诉求各有不同,譬如,对于企业高管,更关注核心指标,关注目标和现状之间的差距,关注当前业务主要风险点;而对于业务... 于是你发现问题可能出在了图表的选择和数据的呈现上,但是怎样才能让数据代表的业务意义生动立体,跃然纸上呢?### **[🎯](https://www.emojidaquan.com/emoji-direct-hit)** **选对图表类型,图表信息秒掌握**俗话...

大数据

基于 LoserTree 的 Paimon 多路归并优化

并将相同的 Key 使用 MergeFunction 进行合并,其中每个 RecordReader 的数据是有序的。整个读取过程实际上是对多个 RecordReader 的数据进行多路归并。在归并过程中,数据之间的比较次数越多,整体排序耗时越高。... 如果父子节点进行比较后发生了数据交换,那么会产生自顶向下的调整,这种调整每次都需要和两个子节点同时进行比较。1. **建堆**假设有 5 个待排序列,第一步需要将这 5 个待排序列的按照头元素的大小调整为小根堆...

云原生

特惠活动

热门爆款云服务器

100%性能独享，更高内存性能更佳，学习测试、web前端、企业应用首选，每日花费低至0.55元
￥60.00/年1212.00/年
立即购买

域名注册服务

cn/top/com等热门域名，首年低至1元，邮箱建站必选
￥1.00/首年起32.00/首年起
立即购买

DCDN国内流量包100G

同时抵扣CDN与DCDN两种流量消耗，加速分发更实惠
￥2.00/年20.00/年
立即购买

两个兄弟元素的外边距是否必须是相同类型才能发生外边距折叠？-优选内容

万字长文带你漫游数据结构世界|社区征文
**数据结构是什么呢?**首先得知道数据是什么?**数据是对客观事务的符号表示**,在计算机科学中是指所有能输入到计算机中并被计算机程序处理的符号总称。那为何加上**“结构”**两字?**数据元素是数据的基本单位... 都是同一个节点,只是为了好看,弄了两份,实际上是同一个节点,有两个指针,比如 1 ,既指向2,也指向5**):![](https://markdownpicture.oss-cn-qingdao.aliyuncs.com/blog/20220108121514.png)两层指针,问题依然存在...
基于 LoserTree 的 Paimon 多路归并优化
并将相同的 Key 使用 MergeFunction 进行合并,其中每个 RecordReader 的数据是有序的。整个读取过程实际上是对多个 RecordReader 的数据进行多路归并。在归并过程中,数据之间的比较次数越多,整体排序耗时越高。... 如果父子节点进行比较后发生了数据交换,那么会产生自顶向下的调整,这种调整每次都需要和两个子节点同时进行比较。1. **建堆**假设有 5 个待排序列,第一步需要将这 5 个待排序列的按照头元素的大小调整为小...
如何搭建清晰易懂的数据看板?|社区征文
分以下两个步骤。### **📌 明确看板阅读者角色(who to present)** :不同角色的用户对于数据看板的诉求各有不同,譬如,对于企业高管,更关注核心指标,关注目标和现状之间的差距,关注当前业务主要风险点;而对于业务... 于是你发现问题可能出在了图表的选择和数据的呈现上,但是怎样才能让数据代表的业务意义生动立体,跃然纸上呢?### **[🎯](https://www.emojidaquan.com/emoji-direct-hit)** **选对图表类型,图表信息秒掌握**俗话...
基于 LoserTree 的 Paimon 多路归并优化
并将相同的 Key 使用 MergeFunction 进行合并,其中每个 RecordReader 的数据是有序的。整个读取过程实际上是对多个 RecordReader 的数据进行多路归并。在归并过程中,数据之间的比较次数越多,整体排序耗时越高。... 如果父子节点进行比较后发生了数据交换,那么会产生自顶向下的调整,这种调整每次都需要和两个子节点同时进行比较。1. **建堆**假设有 5 个待排序列,第一步需要将这 5 个待排序列的按照头元素的大小调整为小根堆...

两个兄弟元素的外边距是否必须是相同类型才能发生外边距折叠？-相关内容

通用组件教程

设置背景和边框,不用的话可以不勾选; 6、多选项组件设置选项供用户点击一项或多项选择,可设置最多选择几项,选择数据可回收至后台; 多项选择配置基本与单项选择相同,不同的配置项见下方。 选项配置 多项选择选择... 上传后正常展示 只有两个选项时,如何配置? 在探索版选项卡的默认状态下,如果只有两个选项的情况下会靠左展示,选项卡宽度会根据上传图片自动撑开; 建议设计尺寸:宽度:335px,外边距:20,选项间距:40。 如果外边距...

来自：文档

一个大龄程序猿2022年的开发故事|社区征文

这两个组件节省了很多PC端重复的工作,以及bug修改,感觉封装出来还是有点成就感的,我的前端兄弟都觉得非常的nice。 - 搞pc期间还接触了leaflet、leaflet-geoman来给地图打点或者画区域,上手略有难度,但经过几天... 另外一个突破便是将vant 列表数据模板,做了两个通用的,根据SQL配置 接口返回通用的数据结构列表,去匹配模板列表。其实这里也有思考通过后台配置,拖拽元素实现列表的一行数据样式展示,但是在渲染的时候我是根据...

来自：开发者社区

移动开发中项目遇到的问题和总结|社区征文

生成图片区域中的dom元素中有img标签,生成图片后,img图片加载不出来> - 添加useCORS:true属性;> - 给要生成canvas的DOM中包含的每一个img标签添加crossorigin="anonymous"属性;> - 确保你的图片CDN服务器支... 错误原因应该是不能直接使用小数,`transition:all (1.6*0.5)s`,有遇到该问题的兄弟可留言,博主目前这么解决的4. vue项目中使用的element ui的icon乱码,需要在vue.config.js中加入以下代码```javascriptmodule...

来自：开发者社区

热门爆款云服务器

100%性能独享，更高内存性能更佳，学习测试、web前端、企业应用首选，每日花费低至0.55元
￥60.00/年1212.00/年
立即购买

域名注册服务

cn/top/com等热门域名，首年低至1元，邮箱建站必选
￥1.00/首年起32.00/首年起
立即购买

DCDN国内流量包100G

同时抵扣CDN与DCDN两种流量消耗，加速分发更实惠
￥2.00/年20.00/年
立即购买

提升业务科学决策 字节跳动A/B测试大揭秘

但是错误操作的渗透率却提升了4%,得出实验结论:这种半动态式的引导样式其实对于核心指标是没有收益的。另外两个护栏指标,一个是上滑操作的渗透率,另一个是错误操作的渗透率都不是特别好,围栏指标也是负向显著,所以... 可视化建站实验:帮助非研发人员直接在页面上通过配置的方式改文案等元素,非常简单快捷; 多链接网页实验:在广告场景下,我们有多个活动页面但是又没有自动化投放工具怎么办?我一个入口可以做重定向,直接把流量打到...

来自：文档

展望 2022 :Android 开发技术动向 | 社区征文

距离上一代 M2 已经过去了4年![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7a8fb7a99f904ef08d0f0b4a7f8546bc~tplv-k3u1fbpfcp-5.jpeg?)跟上一代 M2 相比 M3 的元素面积更大、更便于用户点... 除了平板类产品以外又出现了折叠屏手机这一新兴门类,目前已经有超过250万部大屏幕设备上运行着 Android 系统。为提高大屏设备的使用体验。 Android12 即将推出一个专门为大屏优化的版本,命名 **12L**。12L 针对大屏...

来自：开发者社区

提升业务科学决策 - A/B测试大揭秘

但是错误操作的渗透率却提升了4%,得出实验结论:这种半动态式的引导样式其实对于核心指标是没有收益的。另外两个护栏指标,一个是上滑操作的渗透率,另一个是错误操作的渗透率都不是特别好,围栏指标也是负向显著,所以... 可视化建站实验:帮助非研发人员直接在页面上通过配置的方式改文案等元素,非常简单快捷; 多链接网页实验:在广告场景下,我们有多个活动页面但是又没有自动化投放工具怎么办?我一个入口可以做重定向,直接把流量打到...

来自：文档

仪表盘搭建最佳实践

类型和Y轴范围,展示指标值范围差异大的两组指标 查看每天的收入,并在次轴显示环比查看各类目下的收入(百万级)和销售量(万级) 饼图 展示不同分类的占比 查看各渠道总销售额占比 地图 展示省份/国家的地理信息数据 通过颜色,查看销售额在省份上的分布 双向条形图 对比相同维度下的两个指标 查看各渠道的销售额和销售量 组合图 同纬度图表集中展示 组合查看各渠道下的销售额、成本、利润 散点图 展示两个连续数据之间的关系,通常...

来自：文档

分享

朋友圈等应用端外场景。本文主要介绍分享功能的具体技术实现。 分享方案基于UI合规需求,图文、短视频、小视频的分享详情页在客户域名下; 客户内嵌火山引擎的分享h5页面(share_url),在h5页面内支持点击查看原文超链接,跳转到火山引擎域名下的内容详情页,且跳转后支持返回到原来的分享页面; 分享h5页面只包括正文部分,默认展开全文(不折叠); 客户自主实现顶部UI,导流浮层,二次分享等; 分享效果场景 分享页-客户域名 点击“查看原文...

来自：文档

特惠活动

热门爆款云服务器

100%性能独享，更高内存性能更佳，学习测试、web前端、企业应用首选，每日花费低至0.55元
￥60.00/年1212.00/年
立即购买

域名注册服务

cn/top/com等热门域名，首年低至1元，邮箱建站必选
￥1.00/首年起32.00/首年起
立即购买

DCDN国内流量包100G

同时抵扣CDN与DCDN两种流量消耗，加速分发更实惠
￥2.00/年20.00/年
立即购买

产品体验

体验中心

云服务器特惠

云服务器
云服务器ECS新人特惠
立即抢购

白皮书

一图详解大模型
浓缩大模型架构，厘清生产和应用链路关系
立即获取

相关主题

两个系列之间的互动循环两个性能测试的奇怪结果 两个形状不同的 np.ndarray 相减两个形状的Dimension0必须相等，但是它们分别是0和512。形状分别为[0]和[512]。 两个形状为T1 = N*D和T2 = M*D的tensorflow张量；其中M < N。T1中的行在T2中。找出T2中每一行对应的T1张量的行的索引。两个形状之间的碰撞两个信号的归一化互相关在Python中的实现两个信号之间的互相关是否受到缩放的影响？两个信用卡号码出现错误，识别其为错误的信用卡类型。 两个兄弟元素的外边距是否必须是相同类型才能发生外边距折叠？

最新活动

爆款1核2G共享型服务器

首年60元，每月仅需5元，限量秒杀
立即抢购

火山引擎增长体验专区

丰富能力激励企业快速增长
查看详情

数据智能VeDI

易用的高性能大数据产品家族
了解详情

热门访问

4175421在第一次插入后的INSERT尝试中返回NULL。 L += [a] 和 L.append(a) 之间的区别是什么？L = {aa, bb, ba, baa, bba} 的花自动机L = {a^i b^j c^k d^l | i=k 且 j=l}，我找不到给定语言的文法。L = {a^nb^m : m ≥ n, m-n是偶数}的PDAL = {w ∈ {a,b}* : a的数量是b的两倍}的NPDAL = {wxw| x, w ∈ {a,b}*}是一个正则语言吗？L'Ecuyer与Bays-Durham的随机数生成器L(n)中“ill-formeddeclaration”的含义是什么？ L-attributed语法和自底向上分析

一键开启云上增长新空间

立即咨询