教育改变生活
标题: CSS基础-9 外边距 [打印本页]
作者: 却尘 时间: 2023-10-20 10:01
标题: CSS基础-9 外边距
CSS 外边距
CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间。
通过 CSS，您可以完全控制外边距。有一些属性可用于设置元素每侧（上、右、下和左）的外边距。
Margin - 单独的边
CSS 拥有用于为元素的每一侧指定外边距的属性：
· margin-top
· margin-right
· margin-bottom
· margin-left
所有外边距属性都可以设置以下值：
· auto - 浏览器来计算外边距
· length - 以 px、pt、cm 等单位指定外边距
· % - 指定以包含元素宽度的百分比计的外边距
· inherit - 指定应从父元素继承外边距
提示：允许负值。
实例
为 <p> 元素的所有四个边设置不同的外边距：
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Margin - 简写属性
为了缩减代码，可以在一个属性中指定所有外边距属性。
margin 属性是以下各外边距属性的简写属性：
· margin-top
· margin-right
· margin-bottom
· margin-left
工作原理是这样的：
如果 margin 属性有四个值：
· margin: 25px 50px 75px 100px;
o 上外边距是 25px
o 右外边距是 50px
o 下外边距是 75px
o 左外边距是 100px
实例
margin 简写属性设置四个值：
p {
margin: 25px 50px 75px 100px;
}
如果 margin 属性设置三个值：
· margin: 25px 50px 75px;
o 上外边距是 25px
o 右和左外边距是 50px
o 下外边距是 75px
实例
使用已设置三个值的 margin 简写属性：
p {
margin: 25px 50px 75px;
}
如果 margin 属性设置两个值：
· margin: 25px 50px;
o 上和下外边距是 25px
o 右和左外边距是 50px
实例
使用设置了两个值的 margin 简写属性：
p {
margin: 25px 50px;
}
如果 margin 属性设置了一个值：
· margin: 25px;
o 所有四个外边距都是 25px
实例
使用设置一个值的 margin 简写属性：
p {
margin: 25px;
}
auto 值
您可以将 margin 属性设置为 auto，以使元素在其容器中水平居中。
然后，该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。
实例
使用 margin: auto：
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
inherit 值
本例使 <p class="ex1"> 元素的左外边距继承自父元素（<div>）：
实例
使用 inherit 值：
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
CSS 外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
外边距合并
外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。
简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image002.png
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image004.png
尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image006.png
如果这个外边距遇到另一个元素的外边距，它还会发生合并：
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image008.png
这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。
外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image010.png
注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
所有 CSS 外边距属性
| 欢迎光临 教育改变生活 (http://193.112.175.132/discuz/) |
Powered by Discuz! X3.2 |