外边距合并概念

最新推荐文章于 2024-06-27 08:47:11 发布
原创 最新推荐文章于 2024-06-27 08:47:11 发布 · 136 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博客主要围绕外边距合并概念展开，但具体内容缺失。外边距合并是前端开发中可能涉及的重要概念，了解它有助于更好地进行页面布局和样式设计。

外边距合并概念


通过学习，我的理解是
上下相邻的两个元素，且都是块级元素，第一个元素的margin-bottom 会和下一个元素的margin-top合并，合并到最大值那个
假如上一个元素margin-bottom：100px
下一个元素margin-top：150px
两个元素上下的实际间距不是250px 而是150px

css零到一基础教程024：CSS 外边距合并
kerryqpw的博客
03-19 166
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 外边距合并 外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。 简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图： 实例： <h.
CSS的margin属性：为什么外边距垂直相遇会合并，而水平相遇则不会合并呢？
Elsa~的博客
04-14 1221
①、外边距是什么？ 标签与标签之间的距离就是外边距。 ②、为什么要有外边距？ 用来设置标签与标签之间的间距。 ③、如何使用外边距？ 非连写方式： margin-top margin-right margin-bottom margin-left 连写方式： margin:top right bottom left ④、外边距与内边距的区别？ 外边距是标签与标签之间的距离，...
外边距合并问题解析与整理
qq_42852004的博客
06-05 734
外边距合并问题主要发生在上外边距问题的展现： 当父集和子集同时margin-top的时候一个是50px另外一个是20px，选择最大的那个值 父子级外边距合并，造成子集不能实现margin-top=>什么原因？=>怎么解决？ padding解决外边距合并问题=>overflow:hidden; border怎么去继承， 怎么去继承父级元素 造成的原因 普通文档流的概念：从上到下...
外边距合并
miracle22222的博客
03-27 325
外边距合并：块级元素的上外边距和下外边距有时候会合并（或折叠），其大小取其中一个最大的值，这种行为就叫做外边距折叠，有时候也称为外边距合并。注意浮动元素和绝对定位元素的外边距是不会折叠的。 下面列出会发生外边距折叠的情况： 相邻元素之间 ：毗邻的两个元素之间的外边距会折叠（除非后一个元素需要清除之前的浮动） 父元素与其第一个或者最后一个子元素之间:如果在父元素与其第一个子元素之间不存在边框、...
外边距合并与溢出
dixi7825的博客
12-12 173
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus®"> 6 <meta name="...
CSS外边距合并（塌陷/margin越界）
u010565037的博客
08-13 468
大纲 　　1、什么是外边距合并？(折叠外边距) 　　2、外边距带来的影响 　　3、折叠的结果 　　4、产生折叠的原因 　　5、出现的情况 1、什么是外边距合并？(折叠外边距) 　　外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。而左右外边距不合并。 　　在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。 　
CSS外边距合并代码
09-25
外边距合并是CSS布局中一个常见的现象，特别是涉及到元素垂直排列时。当我们为相邻元素设置外边距时，有时它们并不会简单地相加，而是会合并成一个较大的值，这被称为外边距合并或外边距折叠。 在CSS中，有两种主要...
HTML块元素与垂直外边距合并：盒子模型深入解析
本文主要聚焦于两大关键点：块级元素（包括标记）和行内元素的区别，以及块元素外边距合并的规则。 一、区块容器标记（如`<div>`） 1. 区块元素：`<div>`标签是HTML中的基本区块元素，用作容器来组织和布局网页...
外边距折叠1
08-08
在CSS布局中，外边距折叠（Margin Collapsing）是一个重要的概念，它涉及到元素间的垂直间距处理。这个现象主要发生在相邻元素的垂直外边距上，尤其是兄弟元素和父子元素之间的关系。我们来深入探讨这个主题。 首先...
外边距合并知识
weixin_30385925的博客
03-02 224
一、什么是外边距合并 外边距合并是指垂直相邻的块级元素在边距相遇时会形成一个外边距，最终的外边距以两者中较大的为准。 二.外边距合并的直观例子 1.父子之间 1.1 父元素没有margin-top,子元素有margin-top，合并后父元素的margin-top为子元素设置的，子元素的margin-top失效 演示代码如下： <div class="box1"&...
外边距合并问题
weixin_37517235的博客
04-12 356
外边距合并：当两个盒子嵌套时，它的垂直外边距会显示较大的那个值解决方法:加边框 加padding     2.当两个盒子相邻时，它的垂直外边距会显示较大的那个值。解决方案：中间加个元素就行(可以加个div,设置他的下边框是1px solid transparent)      3.大盒子(a)里面嵌套小盒子(b),要想去除边距合并的问题,解决方案是:a(父级)设置position:relative...
030_CSS外边距合并
aihiao的专栏
10-15 265
1. 外边距合并指的是, 当两个垂直外边距相遇时, 它们将形成一个外边距。 2. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 3. 外边距合并 3.1. 外边距合并(叠加)是一个相当简单的概念。但是, 在实践中对网页进行布局时, 它会造成许多混淆。 3.2. 简单地说, 外边距合并指的是, 当两个垂直外边距相遇时, 它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 3.3. 当一个元素出现在另一个元素上面时, 第一个元素的下外边距与第二个元素
外边距合并的出现以及解决方式
cyqzy的博客
04-20 715
1. 什么是外边距如两个div，第一个div的margin-bottom:30px，第二个div的margin-top:10px，页面表现结果是30px，而不是我们理想中的30px+10px=40px，结果选择的是两者之间最大的margin，这种机制就是“外边距合并”2. 外边距出现地方（1）相邻的元素（2）父子级之间3. 外边距合并需要注意以下几个方面（1）外边距合并只出现在块级元素（2）行内块...
day08
最新发布
thinkingicecola的博客
06-27 818
如果一个父元素没有上边框、上内边距、内联内容、清除浮动等，那么它的上外边距会与其第一个子元素的上外边距合并。">">第一个子元素</p></div>在这种情况下，父元素和第一个子元素的上外边距会合并，最终的上外边距是50px。同样，如果一个父元素没有下边框、下内边距、内联内容、清除浮动等，那么它的下外边距会与其最后一个子元素的下外边距合并。">">最后一个子元素</p></div>在这种情况下，父元素和最后一个子元素的下外边距会合并，最终的下外边距是50px。
垂直外边距合并的问题及解决方法
qq_40541995的博客
10-09 1617
外边距合并及解决办法
最全的css中解决外边距合并问题
renjie123321的博客
09-25 2841
外边距合并 首先，我们先来看一下什么是外边距合并。 外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。 简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。 但在垂直方向上又分为两种情况，父子级和兄弟级。接下来，我们分别来讨论这两种情况。 父子级 首先我们看一下外边距合并时的现象 <!DOC
浅谈CSS外边距合并
筱葭的博客
11-08 3043
1、外边距合并 当有负边距存在时，合并后的外边距将是最大正边距加上最小负边距（即负边距中绝对值最大的一个）。 （1）相邻兄弟元素 相邻的两个兄弟元素的之间的外边距会塌陷（当后者被清除浮动时除外）。 段落一 段落二 这两个段落间的距离，不是段落一的下边距与段落二的上边距的和50px，而是两者中的较大者30px。 （2）块级父元素与其第一个/最后一个子元素 块级父元素中，不存在b
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值