CSS 外边距
外边距用于在元素周围创建空间，在其任何定义的边框之外。
此元素的边距为 70px。
自己动手试一试 »
CSS 外边距
CSS margin 属性用于在元素周围创建空间，在其任何定义的边框之外。
使用 CSS，您可以完全控制外边距。有用于设置元素每个侧面（上、右、下、左）外边距的属性。
外边距 - 单独的侧边
CSS 具有指定元素每个侧面外边距的属性
margin-topmargin-rightmargin-bottommargin-left
所有外边距属性都可以具有以下值
- auto - 浏览器将计算外边距
- length - 以 px、pt、cm 等为单位指定外边距
- % - 以包含元素宽度的百分比指定外边距
- inherit - 指定外边距应从父元素继承
提示：允许使用负值。
示例
为 <p> 元素的四个侧面设置不同的外边距
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
自己动手试一试 »
外边距 - 简写属性
为了缩短代码，可以将所有外边距属性都写在一个属性中。
margin 属性是以下各个外边距属性的简写属性
margin-topmargin-rightmargin-bottommargin-left
所以，它是这样工作的
如果 margin 属性有四个值
- margin: 25px 50px 75px 100px;
- 上外边距为 25px
- 右外边距为 50px
- 下外边距为 75px
- 左外边距为 100px
如果 margin 属性有三个值
- margin: 25px 50px 75px;
- 上外边距为 25px
- 右外边距和左外边距为 50px
- 下外边距为 75px
如果 margin 属性有两个值
- margin: 25px 50px;
- 上外边距和下外边距为 25px
- 右外边距和左外边距为 50px
如果 margin 属性有一个值
- margin: 25px;
- 所有四个外边距均为 25px
auto 值
您可以将 margin 属性设置为 auto，以在其容器内水平居中元素。
然后，元素将占据指定的宽度，剩余空间将在左外边距和右外边距之间平均分配。
inherit 值
此示例允许 <p class="ex1"> 元素的左外边距从父元素 (<div>) 继承
示例
inherit 值的用法
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
自己动手试一试 »
所有 CSS 外边距属性
| 属性 | 描述 |
|---|---|
| margin | 在一个声明中设置所有外边距属性的简写属性 |
| margin-bottom | 设置元素的底部 margin |
| margin-left | 设置元素的左 margin |
| margin-right | 设置元素的右 margin |
| margin-top | 设置元素的顶部 margin |
