margin折叠在布局中经常发生,需要知道margin折叠触发规则和它遵循什么规则计算距离。
margin折叠的规则
- 两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠
- 浮动元素/inline-block的元素/绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠
- 创建了块级格式化内容的元素,不和它的子元素发生margin折叠
- 元素自身的margin-bottom和margin-top相邻时也会折叠
B
<div style="border:1px solid red; width:100px;">
<div style="margin:50px 0; background-color:green; height:50px; width:50px;">
<div style="margin:20px 0;">
<div style="margin:100px 0;">B</div>
</div>
</div>
</div>
margin collapsing
-
上边距只要不设置border/padding,都会发生重叠.
里面的三个div都发生了重叠
-
下边距只要设置高度,就不会重叠.
例如第二个div设置了高度50px,它的子元素margin-bottom与它不会发生重叠
B
<div style="border:1px solid red; width:100px;">
<div style="margin:50px 0; background-color:green; height:50px; width:50px;">
<div style="margin:20px 0;">
<div style="margin:-60px 0;">B</div>
</div>
</div>
</div>
margin值有正有负
-
若margin有正有负,则取正最大和负最小相加.
-60+50=-10,所以上边距为-10px
-
子元素的margin-top会影响它跟最近的设置了padding或者border的父节点位置.
更改B的margin,相对绿色div的位置不变,相对于设置了border的外层div位置会变化
A
B
<div style="background-color:green;width:50px;margin-top:50px;">
<div style="margin-top:-30px;margin-bottom:30px;">
<div style="margin-top:50px;margin-bottom:-30px;">A</div>
</div>
</div>
<div style="margin:-10px 0; background-color:green; width:50px;">
<div style="margin:-10px 0;">
<div style="margin:40px 0;">B</div>
</div>
</div>
上下两个元素重叠
-
两个相邻的元素之间的距离,是由上一个元素的margin-bottom和下一个元素的margin-top的得出的.
AB两个元素的距离,取位于A元素的有效的margin-bottom(注意height,border对margin-bottom的影响),取B元素的有效的margin-top,在两个元素的数据中取最大正值,和最小负值,两值相加得到就是两个元素的margin距离。
A的有效margin-bottom为30px、-30px,B有效margin-top为-10px、-10px、40px,AB的距离=-30px+40px=10px;
B
<div style="border:1px solid red; width:100px;">
<div style="margin:50px 0; background-color:green; height:50px; width:50px;">
<div style="margin:20px 0;">
<div style="margin:100px 0;">B</div>
</div>
</div>
</div>
创建了BFC元素margin折叠
-
创建了block formatting context元素,就像设置了border和padding一样效果.
什么样的元素会创建bfc,请看http://www.zhoumingzhi.com/2010/06/24/intro-block-formatting-context/
A
B
<div style="margin:10px 0; background-color:green; width:50px;">A</div>
<div style="margin:10px 0; background-color:green; width:50px;float:left;">B
</div>
设置了某些css值的margin折叠
-
元素设置了inline-block、float、position.
设置了这些属性的元素,margin不与内部元素折叠,也不与相邻元素折叠
相关推荐
**CSS中的Margin折叠问题详解** 在CSS布局中,"margin折叠"是一个常见的概念,它涉及到元素间margin边距的合并,而不是我们通常认为的错误或bug。这一现象在CSS2.1规范中得到了明确的规定。水平方向上的margin并不...
这种现象被称为“margin折叠”(collapsing margins)。 #### 二、`margin` 折叠的概念 所谓`margin`折叠,指的是两个或多个盒子模型之间的相邻`margin`属性结合为一个单独的`margin`。具体来说,在CSS2.1规范中,...
2. **Margin折叠**:同一BFC内的相邻盒模型之间可能会发生margin折叠现象,即两个相邻盒子的垂直margin会被折叠为一个较大的值。 3. **左边界对齐**:每个元素的左外边距(margin-left)将与包含块的左边界对齐,...
清除操作(比如`clear: both`)可以阻止margin折叠,特别是在元素的margin-top与其块级父元素的margin-bottom之间。 如果遇到Firefox中`margin-top`失效的情况,可以尝试以下几种解决方法: - 检查是否有浮动元素...
11_盒子模型-margin的折叠
#### 四、margin折叠问题 当相邻元素的`margin`值在垂直方向上发生合并时,就会出现`margin`折叠问题。 **触发条件**: - 元素之间必须是毗邻的,且没有被非空内容、`padding`、`border`或`clear`所分隔。 - 元素...
- **与margincollapse**: 绝对定位元素不会触发margin折叠。 - **与overflow**: overflow:hidden可以限制绝对定位元素的位置。 - **与float**: 浮动元素不会影响绝对定位元素的位置。 以上涵盖了《前端面试汇总》...
外边距折叠是CSS布局中的一个现象,指的是垂直方向上相邻的两个元素的margin会折叠成为它们中最大的那一个margin值。这个现象的初衷是为了让垂直布局更加美观。外边距折叠分为三种类型: - 兄弟元素的margin重叠:...
CSS+JS 实现 DIV 层的展开折叠效果 本文将详细介绍如何使用 CSS 和 JS 实现一个 DIV 层的展开折叠效果。这个效果可以在网页上实现一个折叠的样式,用户可以点击按钮来展开或折叠内容。 HTML 结构 首先,我们需要...
3. **布局**:CSS的`position`属性和`margin`、`padding`等可以帮助调整菜单的布局,使其看起来整洁有序。 4. **层次感**:通过设置合适的`padding-left`值,可以为不同级别的菜单项创建适当的缩进,体现层次关系。...
margin: 4px 2px; cursor: pointer; } ``` 在这个“文字过多折叠示例”的压缩包中,可能包含了实现上述功能的HTML文件、CSS文件和JavaScript文件。通过查看和学习这些文件,你可以更深入地理解如何在ASP环境中...
“collapsing margins”(折叠margin)的意思是:2个或以上盒模型之间(关系可以是相邻或嵌套)相邻的margin属性(这之间不能有非空内容、padding区域、border边框或使用清除分离方法)结合表示为一个单独的margin。...
CSS中的外边距折叠指的是相邻的两个或多个块级元素的外边距(margin)会合并成一个外边距。这种情况在块级元素垂直排列时尤为常见,比如相邻兄弟元素之间、父元素与第一个或最后一个子元素之间以及空的块级元素之间...
margin-top: 5px; } ``` 3. **交互逻辑**:为了让菜单折叠和展开,我们需要使用JavaScript或jQuery来处理点击事件。这里,我们可以用简单的条件语句来控制`.menu-content`的`display`属性。 ```javascript $('....
margin-bottom: 10px; } .accordion-title { padding: 10px; background-color: #f2f2f2; cursor: pointer; } .accordion-content { padding: 10px; display: none; /* 默认隐藏内容区域 */ transition: ...
<Grid MinHeight="42" x:Name="userinfo" Margin="0 0 0 0" > <StackPanel VerticalAlignment="Center" Margin="40 0 0 0" Orientation="Horizontal"> <TextBlock Margin="14 0 0 0" FontSize="14" Foreground...
8. **盒模型和边距**:理解CSS的盒模型(content、padding、border、margin)对于精确布局至关重要。正确设置边距和填充可以防止元素重叠,保持界面清晰。 9. **选择器优先级**:了解选择器的优先级规则(ID > 类 >...