手册
目录
前言：
边距（Margins）用于在元素周围创建空间，该空间位于任何已定义的边框之外。
CSS 的 margin 属性用于在元素周围创建空白区域，该区域位于任何已定义的边框之外。
使用 CSS，你可以完全控制边距。有专门的属性用于设置元素每一边的边距（上、右、下和左）。
CSS 提供了用于指定元素每一边边距的属性：
margin-topmargin-rightmargin-bottommargin-left所有边距属性都可以使用以下值：
提示： 允许使用负值。
为一个 <p> 元素的四个边分别设置不同的边距：
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}运行实例 » 点击 "运行实例" 按钮查看在线实例
为了简化代码，可以在一个属性中指定所有边距属性。
margin 属性是以下单独边距属性的简写属性：
margin-topmargin-rightmargin-bottommargin-left其工作方式如下：
如果 margin 属性有四个值：
使用包含四个值的边距简写属性：
p {
margin: 25px 50px 75px 100px;
}运行实例 » 点击 "运行实例" 按钮查看在线实例
如果 margin 属性有三个值：
使用包含三个值的边距简写属性：
p {
margin: 25px 50px 75px;
}运行实例 » 点击 "运行实例" 按钮查看在线实例
如果 margin 属性有两个值：
使用包含两个值的边距简写属性：
p {
margin: 25px 50px;
}运行实例 » 点击 "运行实例" 按钮查看在线实例
如果 margin 属性只有一个值：
使用包含一个值的边距简写属性：
p {
margin: 25px;
}运行实例 » 点击 "运行实例" 按钮查看在线实例
你可以将边距属性设置为 auto，以在水平方向上将元素居中显示在其容器中。
此时，元素将占据指定的宽度，剩余的空间将平均分配到左边距和右边距中。
使用 margin: auto：
div {
width: 300px;
margin: auto;
border: 1px solid red;
}运行实例 » 点击 "运行实例" 按钮查看在线实例
以下示例让 <p class="ex1"> 元素的左边距从父元素（<div>）继承：
使用 inherit 值：
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}运行实例 » 点击 "运行实例" 按钮查看在线实例
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.7万人学习
共29课时
62.2万人学习
共25课时
39.6万人学习
共43课时
71.5万人学习
共25课时
62.1万人学习
共22课时
23.2万人学习
共28课时
34.3万人学习
共89课时
126.3万人学习
