- 属性介绍:margin能接收数字长度和值两种数据;
- 数字长度:数字长度的单位可以是像素、英寸、毫米或em;
- 值:值可以是auto、%、inherit;
- auto:一般用来居中,如左右外边距设置为auto实现左右居中。
- %:基于父元素的长度或宽度按照百分比计算;如margin:10%;
- inherit:继承父元素的外边距属性;
- 外边距合并问题的两种情况:
- 父元素和第一个子元素或最后一个子元素的合并:
- 如果父元素的margin-top与第一个子块元素之间没有border、padding、inline-content或clearrance间隔,那么子块元素的margin-top会和父元素的margin-top合并(取大者)
- 如果父元素的margin-bottom与最后一个子块元素之间没有border、padding、inline-content或clearrance间隔,那么子块元素的margin-bottom会和父元素的margin-bottom合并(取大者)
- 毗邻的元素(垂直毗邻)
- 如<li>便签垂直排布时,相邻的两个标签的margin-top和margin-bottom会进行合并(取大者)
- 只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
- 父元素和第一个子元素或最后一个子元素的合并:
- 如果父元素的margin-top与第一个子块元素之间没有border、padding、inline-content或clearrance间隔,那么子块元素的margin-top会和父元素的margin-top合并(取大者)
- 如果父元素的margin-bottom与最后一个子块元素之间没有border、padding、inline-content或clearrance间隔,那么子块元素的margin-bottom会和父元素的margin-bottom合并(取大者)
- 毗邻的元素(垂直毗邻)
- 如<li>便签垂直排布时,相邻的两个标签的margin-top和margin-bottom会进行合并(取大者)
- 只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

本文深入探讨了CSS中margin属性的使用方法及外边距合并问题,包括数字长度单位、百分比、auto、inherit等设定,以及不同元素间外边距合并的两种情况。
332

被折叠的 条评论
为什么被折叠?



