外边距合并概念

最新推荐文章于 2023-07-31 21:48:48 发布
最新推荐文章于 2023-07-31 21:48:48 发布
阅读量98 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hardworkyang6/article/details/111357765
版权

外边距合并概念


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

☆星光不问
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css零到一基础教程024：CSS 外边距合并
kerryqpw的博客
03-19 93
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 外边距合并 外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。 简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图： 实例： <h.
css怎么把多个块合并,CSS外边距合并&块格式上下文
weixin_39590601的博客
08-04 621
前言之前在前端开发的过程中，都没有遇到外边距合并的问题(其实是因为大多时候都直接用前端样式库(〃'▽'〃))，这一次需要动手排一个页面，也挺简单，但是遇到了一个奇怪的问题，所以学习记录一下。问题测试代码如下：test* {margin: 0;padding: 0;}body {max-width: 750px;margin: 0 auto;}.div1 {background: yellow;he...
外边距合并问题解析与整理
qq_42852004的博客
06-05 657
外边距合并问题主要发生在上外边距问题的展现： 当父集和子集同时margin-top的时候一个是50px另外一个是20px，选择最大的那个值 父子级外边距合并，造成子集不能实现margin-top=>什么原因？=>怎么解决？ padding解决外边距合并问题=>overflow:hidden; border怎么去继承， 怎么去继承父级元素 造成的原因 普通文档流的概念：从上到下...
外边距合并
miracle22222的博客
03-27 264
外边距合并：块级元素的上外边距和下外边距有时候会合并（或折叠），其大小取其中一个最大的值，这种行为就叫做外边距折叠，有时候也称为外边距合并。注意浮动元素和绝对定位元素的外边距是不会折叠的。 下面列出会发生外边距折叠的情况： 相邻元素之间 ：毗邻的两个元素之间的外边距会折叠（除非后一个元素需要清除之前的浮动） 父元素与其第一个或者最后一个子元素之间:如果在父元素与其第一个子元素之间不存在边框、...
外边距合并与溢出
dixi7825的博客
12-12 131
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 383
大纲 　　1、什么是外边距合并？(折叠外边距) 　　2、外边距带来的影响 　　3、折叠的结果 　　4、产生折叠的原因 　　5、出现的情况 1、什么是外边距合并？(折叠外边距) 　　外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。而左右外边距不合并。 　　在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。 　
CSS外边距合并代码
09-25
外边距合并是CSS布局中一个常见的现象，特别是涉及到元素垂直排列时。当我们为相邻元素设置外边距时，有时它们并不会简单地相加，而是会合并成一个较大的值，这被称为外边距合并或外边距折叠。 在CSS中，有两种主要...
盒子模型之外边距合并问题
最新发布
mandarin_blog的博客
07-31 292
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
CSS外边距合并和CSS清除浮动
小马过河
08-06 1703
外边距合并 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。 简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 当一个元素出现在另一个...
外边距合并知识
weixin_30385925的博客
03-02 176
一、什么是外边距合并 外边距合并是指垂直相邻的块级元素在边距相遇时会形成一个外边距，最终的外边距以两者中较大的为准。 二.外边距合并的直观例子 1.父子之间 1.1 父元素没有margin-top,子元素有margin-top，合并后父元素的margin-top为子元素设置的，子元素的margin-top失效 演示代码如下： <div class="box1"&...
外边距合并问题
weixin_37517235的博客
04-12 289
外边距合并：当两个盒子嵌套时，它的垂直外边距会显示较大的那个值解决方法:加边框 加padding     2.当两个盒子相邻时，它的垂直外边距会显示较大的那个值。解决方案：中间加个元素就行(可以加个div,设置他的下边框是1px solid transparent)      3.大盒子(a)里面嵌套小盒子(b),要想去除边距合并的问题,解决方案是:a(父级)设置position:relative...
030_CSS外边距合并
aihiao的专栏
10-15 208
1. 外边距合并指的是, 当两个垂直外边距相遇时, 它们将形成一个外边距。 2. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 3. 外边距合并 3.1. 外边距合并(叠加)是一个相当简单的概念。但是, 在实践中对网页进行布局时, 它会造成许多混淆。 3.2. 简单地说, 外边距合并指的是, 当两个垂直外边距相遇时, 它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 3.3. 当一个元素出现在另一个元素上面时, 第一个元素的下外边距与第二个元素
外边距合并的出现以及解决方式
cyqzy的博客
04-20 610
1. 什么是外边距如两个div，第一个div的margin-bottom:30px，第二个div的margin-top:10px，页面表现结果是30px，而不是我们理想中的30px+10px=40px，结果选择的是两者之间最大的margin，这种机制就是“外边距合并”2. 外边距出现地方（1）相邻的元素（2）父子级之间3. 外边距合并需要注意以下几个方面（1）外边距合并只出现在块级元素（2）行内块...
如何解决margin塌陷以及margin合并
热门推荐
shi_1204的博客
05-05 1万+
什么是外边距合并，以及常见的几种情况 外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。 所谓的外边距合并就是，当两个垂直外边距相遇时，它们将形成一个外边距。合并的外边距的高度等于两个发生合并的外边距的高度中的较大者。 发生合并的情况有以下几种： 两个元素是兄弟关系： .两个元素是父子关系（没有内边距或边框把外边距分割开）： 一个空元素，没...
CSS：嵌套的块元素，如何控制内部块元素的位置
tiandaochouqin_1的博客
02-14 1206
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。   解决方法： 1.为父元素定义1px的上边框 或 上内边距 2.为父元素添加 overflow:hidden...
浅谈CSS外边距合并
筱葭的博客
11-08 2933
1、外边距合并 当有负边距存在时，合并后的外边距将是最大正边距加上最小负边距（即负边距中绝对值最大的一个）。 （1）相邻兄弟元素 相邻的两个兄弟元素的之间的外边距会塌陷（当后者被清除浮动时除外）。 段落一 段落二 这两个段落间的距离，不是段落一的下边距与段落二的上边距的和50px，而是两者中的较大者30px。 （2）块级父元素与其第一个/最后一个子元素 块级父元素中，不存在b
垂直外边距合并的问题及解决方法
qq_40541995的博客
10-09 1529
外边距合并及解决办法
margin外边距合并问题
Oranq的博客
03-03 1109
margin属性： 所有浏览器都支持 margin 属性。这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度，也可以分别设置个边的外边距。margin是一个复合属性，包括：margin-top、margin-bottom、margin-left、margin-right    基本使用： 例如：margin：10px 20px 40px 30px;----表示：上/右/下/
HTML块元素与垂直外边距合并：盒子模型深入解析
本文主要聚焦于两大关键点：块级元素（包括标记）和行内元素的区别，以及块元素外边距合并的规则。 一、区块容器标记（如`<div>`） 1. 区块元素：`<div>`标签是HTML中的基本区块元素，用作容器来组织和布局网页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值