垂直外边距合并

最新推荐文章于 2022-12-09 21:00:00 发布
最新推荐文章于 2022-12-09 21:00:00 发布
阅读量354 收藏
点赞数
分类专栏： css
本文为博主原创文章，未经允许禁止转载
本文链接：https://blog.youkuaiyun.com/sinat_27088253/article/details/87904806
版权

今天在复习html标签时，看到w3c对块级元素有这么一条额外注释

默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

之前确实也知道这么一条规则，但是没有具体看过。今天去浏览器中看了一下盒子模型，发现两个块级元素h1, p的垂直外边距被合并在一起了。
p外边距
接下来看一下两个元素分别的盒模型

h1

h1盒模型

p

在这里插入图片描述
可以发现h1和margin大于p的margin，而且最终显示h1与p之间的margin结果为h1的margin

如果将h1的margin改为比p的现有margin小的10px，则最终的h1与p之间的margin显示结果就会变为20px，也就是p的margin。
在这里插入图片描述
综上
当块级元素处于正常文档流中时，如果相邻的块级元素都设置了margin值，那么他们就会存在合并的现象，并且最终两元素之间的距离会取相邻两元素中较大的那个margin值。

参考资料：http://caibaojian.com/toutiao/6023

CSS的外边距合并规则
低代码布道师的博客
10-24 746
比如我们这里有三个容器，A和B都设置了外边距10px，那他们在水平方向的间距是一个求和关系，一共是20px。使用 CSS Flexbox 或 Grid 布局可以更好地控制元素之间的间距，避免外边距合并的问题。有时候，我们给组件设置了外边距，但是在实际运行可能和预期不符，这里有一个知识点叫外边距合并规则。但是A和C，在垂直方向的间距，感觉应该是40px的间距，但实际是取的最大值是30px。直接调整元素的 margin 值，以确保它们之间的间距符合您的设计需求。3、使用 Flexbox 或 Grid 布局。
CSS外边距合并
weixin_34337265的博客
08-23 163
（详情参考http://www.w3school.com.cn/css/css_margin_collapsing.asp） 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 首先附上CSS模型解析图 CSS 框模型概述 元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背...
垂直外边距合并问题
lyf的博客
03-02 495
简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。实际工作中，垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下(FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。 解决外边距合并的方法： 1.当发生外边距合并的...
合并垂直外边距
u010250808的博客
11-08 417
在普通块级元素的垂直格式化元素的垂直格式化一文中，我们提到，块级元素在某些情况下会发生垂直方向的外边距的合并，本文来总结一下垂直外边距合并的场景以及如何避免发生垂直外边距的合并。垂直外边距合并的场景 两个相邻的兄弟元素 两个相邻的兄弟元素，即当两个元素是相邻的，且是同一个父元素时，上方元素的margin-bottom和下方元素的margin-top会发生垂直外边距合并 2.元素和它的首尾子元素
CSS外边距合并代码
09-25
1. **垂直外边距合并**：当两个或多个块级元素上下相邻时，如果它们之间没有边框、内边距或其他非空内容隔开，它们的`margin-bottom`和`margin-top`会合并，最终的间距等于两者中较大的那个值。例如，在上述代码示例...
HTML块元素与垂直外边距合并：盒子模型深入解析
总结，盒子模型不仅涉及元素的可见内容区域（内容区content）、围绕内容的空白区域（内边距padding）、边框（border）和元素的总外部大小（总宽度和总高度），还包括了像垂直外边距合并这样的细节问题。掌握这些概念...
使用HTML开发商业网站-块元素垂直外边距的合并课件.pptx
07-10
垂直外边距合并的影响主要体现在网页的布局和间距设计上。它可以用于创建简洁的间距效果，避免元素之间出现过大的空隙。然而，如果不小心，也可能导致意外的间距问题，尤其是在动态内容或响应式设计中，可能会因为...
解决margin 外边距合并问题
12-14
在网页布局设计中，CSS（层叠样式表）的margin外边距合并是一个常见的问题，尤其是在元素间的间距处理上。这种现象通常被称为“外边距塌陷”（Margin Collapsing），它涉及到相邻或嵌套元素的外边距计算方式。下面...
【css基础】垂直外边距的合并
webfe
05-21 1375
最近在在重温《CSS权威指南》，还是想把基础上
垂直外边距合并--CSS的Margin属性:详解margin属性
大灰狼的小绵羊哥哥的博客
02-20 660
你真的了解margin吗？你知道margin有什么特性吗？你知道什么是垂直外边距合并？margin在块元素、内联元素中的区别？什么时候该用padding而不是margin？你知道负margin吗？你知道负margin在实际工作中的用途吗？常见的浏览器下margin出现的bug有哪些？…… 写css，你少不了与margin打交道，而对于这个平时我们最常用的css属性我们并非十分了解。介于此我打
块级元素垂直外边距合并问题详解
weixin_44162375的博客
02-16 1568
块元素的垂直外边距合并问题 一、垂直外边距 1、使用margin属性定义块级元素的垂直外边距时，会出现外边距合并问题。 垂直外边距，指的就是margin-up上外边距和margin-bottom下外边距。 2、每个盒子都有上下左右四个不同方向的margin值，垂直外边距指的就是上下外边距。 二、相邻块级元素的垂直外边距合并 1、设计两个上下相邻的div盒子模型，得到2个相邻的块级元素。代码如下： //<!DOCTYPE html> <html lang="en"> <he
CSS垂直外边距合并和CSS清除浮动
heartOfblack 离开了电脑，我不希望我还有病
09-14 1675
以下为文档内容： 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 外边距合并 外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。 简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于
垂直方向外边距合并问题
weixin_44249574的博客
08-10 382
外边距合并问题 ——父子级： 当给子元素添加margin属性时，浏览器会把子元素垂直方向的margin值加到父元素的margin属性上 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt
CSS学习之垂直外边距合并问题
moshanghuali的博客
03-19 779
margin之垂直外边距合并问题 基本概念 概念：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者 注意：只有普通文档流中块级元素的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。 出现场景： 父子元素 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/...
块状元素垂直外边距重叠
json博客
12-03 1041
一、垂直外边距重叠属于同一个BFC的两个相邻盒子，垂直margin会发生重叠 二、重叠外边距计算1、如果都是正边界，边界宽度是相邻边界宽度中最大的值2、如果出现负边界，则在最大的正边界中减去绝对值最大的负边界（正-|负|）3、如果没有正边界，则从零中减去绝对值最大的负边界   三、示例 1、如果都是正边界，边界宽度是相邻边界宽度中最大的值 div1{height:200px;widt...
CSS: margin—相邻块元素垂直外边距的合并、嵌套块元素垂直外边距的塌陷
weixin_43932309的博客
12-09 1243
相邻块元素垂直外边距的合并现象两种解法； 嵌套块元素垂直外边距的塌陷现象四种解法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值