外边距合并

_Dreams 发布于2019-08-29 17:16 / 1870人阅读

摘要：如下图和外边距合并之后，边距为。自己和自己合并当元素内容为空时，元素设置的上下会自己和自己合并。二阻止外边距合并的方法给父元素加如下图给加上之后，和就没有产生外边距合并了。

一：外边距合并的场景

从3个简单的小例子来看外边距合并：

1、父子合并

给h1加50px的margin，但实际上h1和div的margin合并在一起了

2、相邻元素合并

detail设置margin为30px,header设置margin为30px，结果两个相邻元素之间的间距发生了合并

而且合并宽度是margin数值大的为准。如下图detail和header外边距合并之后，边距为50px。

3、自己和自己合并

当元素内容为空时，元素设置的上下margin会自己和自己合并。如下面这个例子中，footer为空，设置了上下margin为30px，但实际上footer的间隔只是30px，自己的上下margin合并了。

二、阻止外边距合并的方法 1、给父元素加border

如下图给header加上border之后，h1和header就没有产生外边距合并了。

2、给父元素加上padding

注意：相邻元素合并加padding和border都没有用

3、形成一个BFC

给header加了一个overflow：hidden，形成一个BFC，外边距就不再合并。
但是副作用时overflow：hidden是有作用，如果有二级菜单就会被隐藏。

当然其他形成BFC的方法也可以生效，但也有对应的副作用。
如用float：left，宽度会收缩。需要设置宽度为100%

demo

GPU云服务器云服务器外边距重叠 html外边距上下 html外边距颜色 html 边框外边距

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114211.html

「CSS」Margin Collapsing - 外边距合并

摘要：外边距合并都是基于以下三种基本的外边距合并。空元素它自己的上外边距和下外边距合并了。阻止外边距合并第二种情况不合并设置不为都可。外边距合并在排版上带来非常大的便利，但是人们对其不甚了解，导致使用外边距的时候总是出现繁多问题，今日写下一片文章，总结一下外边距合并。三种基本的外边距合并只有上外边距和下外边距才会触发外边距合并，左外边距和右外边距不会。外边距合并都是基于以下三种基本的外...

cheukyin 2019-08-28 18:17 评论0 收藏0
CSS--外边距合并的问题

摘要：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。首先看下W3C对于外边距合并的介绍：外边距合并...

longshengwang 2019-08-29 12:39 评论0 收藏0
CSS之表格边框合并、兄弟标签外边距合并、父子标签的外边距合并

摘要：本文内容表格边框合并兄弟标签外边距合并父子标签的外边距合并首发日期表格边框合并发生情况当设置了后，表格的相邻边框会合并，使得边框变粗了。本文内容：表格边框合并兄弟标签外边距合并父子标签的外边距合并首发日期：2018-05-01 表格边框合并：发生情况：当设置了cellpadding=0 cellspacing=0后，表格的相邻边框会合并，使得边框变粗了。 D...

_Dreams 2019-04-23 13:46 评论0 收藏0
CSS 盒模型

摘要：概览盒模型也叫框模型，规定了元素框处理元素内容内边距边框和外边距的方式。不幸的是，和在使用自己的非标准模型。当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。如果缺少右外边距的值，则使用上外边距的值。概览 CSS 盒模型 (Box Model)也叫框模型，规定了元素框处理元素内容、内边距、边框和外边距的方式。 showImg(http...

heartFollower 2019-08-28 18:17 评论0 收藏0
挖掘margin属性的内涵

摘要：合并问题块级元素的上边距和下边距有时会合并或者折叠为一个外边距捕获到的重要信息只发生在块级元素，但不包括浮动元素和绝对定位元素只发生在和当前文档流方向的相垂直的方向上由于默认文档流是水平流，因此发生合并的就是垂直方向会出现外边距合并的三种基 1、margin合并问题块级元素的上边距和下边距有时会合并或者折叠为一个外边距捕获到的重要信息只发生在块级元素，但不包括浮动元素和绝对定位...

alanoddsoff 2019-08-29 15:29 评论0 收藏0
css 的margin学习笔记

摘要：的特性始终是透明的。例如就等于如果只有两个值，第一个值表示上下值，第二个值为左右的值。垂直外边距合并问题外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 Margin的特性 margin始终是透明的。 margin通过使用单独的属性，可以对上、右、下、左的外边距进行设置。即：margin-top、marg...

leiyi 2019-08-28 18:00 评论0 收藏0