相邻元素的margin和padding的解析分析

最新推荐文章于 2022-05-25 15:50:53 发布
最新推荐文章于 2022-05-25 15:50:53 发布
阅读量781 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tianxieliuhong/article/details/53340273
版权

1.区块元素：

   无浮动：竖直方向上排布，相邻元素的Margin会合并，Padding各自独立；

   有浮动：Padding各自独立；竖直/水平方向上都各自独立

2.内联元素

   Margin：水平方向的各自独立，不合并；竖直方向上无效。

   Padding:水平方向上各自独立；竖直方向上有效但不占用页面空间（即上下两行的padding可能会重叠）

tianxieliuhong
关注
专栏目录
从零开始学前端 - 7. CSS盒模型 margin和padding详解
qq_39506551的博客
06-03 716
她不美却常驻我心 从零开始学前端 - 7. CSS盒模型 margin 和 padding 详解 CSS盒模型 CSS外边距 margin margin-top失效 margin-bottom与margin-top 的冲突 padding 作者: 她不美却常驻我心 博客地址: https://blog.csdn.net/qq_39506551
相邻元素之间的margin问题：
前端说
02-17 6505
任何元素都可以设置border 设置宽高可能无效 行内元素设置padding，margin上下是无效的，左右是有效的外边距合并：指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将
元素之间设置margin的影响及原因
m0_45251556的博客
04-08 1270
在写网页布局时通常会遇见给元素之间设置margin无效或其他影响，所以简单记录下： 影响： 1.父子、兄弟元素间设置垂直方向上的margin时，margin会发生重叠，只选取最大值 2.父子元素之间，给子元素设置margin-top时，子元素会影响父元素，带动父元素下移，影响父元素位置 注意：margin带来的影响只会发生在块级元素之间，因为主要是垂直方向上的影响 原因： BFC机制的规定： W3C中指出： 在块格式化上下文中，框从包含块的顶部开始一个接一个地垂直排列。 两个兄弟框之间的
margin重合(外边距重叠)及解决方法
liuye066的专栏
05-25 1万+
CSS 外边距重叠(外边距塌陷) 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。 一、哪些元素会发生外边距重叠问题 外边距的重叠只产生在普通流文档的上下外边距之间， 只有 块元素 会发生外边距重叠，行内元素 和 行内块元素 都不会发生外边距重叠问题 二、什么情况下会发生外边距重叠呢 第一种情况： 相邻兄弟元素的marin-bottom和margin-top的值
CSS 外边距(margin)重叠及防止方法
张晋悦的博客
03-27 338
CSS 外边距(margin)重叠及防止方法 两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。 但是边界的重叠也...
css margin属性深入解析
09-25
盒模型中，一个元素由内容区域（content）、内边距（padding）、边框（border）和外边距（margin）组成。`margin`区域是元素边框之外的空白空间，它对元素周围的其他元素产生影响，比如创建间距或导致元素重叠。 ##...
深入解析CSS中margin属性的使用
09-24
如果父元素没有上边距填充或者上边框，那么这个子元素的上边距可能会与父元素的上边距合并，导致父元素的上边距被子元素影响，进而影响到相邻元素的布局。 为了解决垂直外边距合并的问题，通常需要确保父元素有上边...
CSS 之margin知识点(必看)
09-24
例如，当两个段落元素相邻时，它们之间只有单个em的空间而不是两个em，因为第一个段落元素的margin-bottom和第二个段落元素的margin-top发生了重叠。此外，空的块级元素可能会出现margin重叠，可以通过给父元素添加...
相邻div实现一个跟着另一个自适应高度示例代码
09-25
这个方法的核心在于利用`padding-bottom`和`margin-bottom`的组合，使得`div`的实际高度不被增加，但内容区域的高度可以随内容多少而变化。当任一侧的`div`内容增多时，其`padding-bottom`所创建的虚拟高度会随之...
详解 CSS 外边距重叠(外边距塌陷)问题及解决办法
m0_46862838的博客
09-30 7238
边距重叠这个问题之前遇到过，但是并没有太在意，最近多次遇到，就去查了一下。 边距重叠就像字面意思一样，两边距重叠到一起了。 官方一点解释就是： 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。 而造成外边距重叠有 三种情况： 第一种情况：发生在同一层相邻元素之间 ...
margin重叠及padding详解
weixin_30319097的博客
03-19 700
margin 外边距有重叠效果 就是在竖直方向，当两个元素的外边距连在一块时，两者的距离并不是两者margin之和，而是取最大margin为准 内边距padding的探讨: 1、四个方向上的padding定义和margin一样 2、padding是透明的，也就是说Padding区域的颜色是盒子的背景色，或者说盒子的背景色铺到盒子的内边框处 /** 燕十八 公益PHP培训 课堂...
android 外边距,外边距（padding）重叠的及解决办法
weixin_28836507的博客
05-27 1046
两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。但是边界的重叠也有例外情况：1、水平边距永远不会重合。2、在规范文档中，2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下...
外边距重叠-css冷知识
Corey
11-29 623
外边距重叠就是 margin-collapse。相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。 这种合并外边距的方式被称为折叠，结合而成的外边距称为折叠外边距 折叠结果遵循下列计算规则： 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值 两个外边距一正一负时，折...
外边距margin融合(重叠)的解决办法
至简
08-28 2156
相邻或者嵌套的盒模型之间没有非空内容,边框等情况下上下 margin 会发生融合的现象.嵌套的话子级的margin会传递到父级后融合. 解决办法: 1.給父级边框(给子级加不起作用). 2.給子级或者父级的 display 设为 inline-block. 3.給父级设置 overflow:hidden 上述的第三种情况如果不想让父级 overflow:hidden的话,可以用伪
margin或者padding值为4个、3个、2个、1个的时候分别是什么意思
热门推荐
milklili的博客
08-28 3万+
以margin为例，padding同理 margin为4个时，margin:上  右  下  左;（为顺时针方向） margin为3个时，margin:上   左=右   下; margin为2个时，margin:上=下   左=右; margin为1个时，margin:上=右=下=左;
inline行内元素与padding margin 的断舍离
JiM-W 的博客
12-14 2793
inline 行内元素 padding margin -top bottom line-height
CSS margin属性深度解析与应用指南
- 元素自身的margin-bottom和margin-top：当这两个方向的margin相邻时，也会折叠。 5. 折叠后的margin计算规则： - 参与折叠的margin必须是同方向且连续的，不能同时有正负值。 - 正值的margin会覆盖负值，形成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值