在本教程中，我们将学习边距。

边距

它是元素周围的空间，将其与其他元素分隔开。

我们可以设置长度，百分比，自动和继承的边距值。

当边距设置为长度时，我们使用px，mm，cm等。

在下面的代码中，我们将边距设置为10px。

div {
	margin : 10px;
}

当margin设置为0时，我们不使用px单位。

div {
	margin : 0;
}

如果边距设置为"自动"，则浏览器将计算元素的边距。

为了从父母那里继承保证金，我们使用" inherit"值作为保证金。

默认情况下，保证金值不从父元素继承。

我们也可以使用负值作为保证金。

边距全部4边

一个元素有4个面，当我们设置margin属性时，我们为所有4个面都进行了设置。

为了获得更好的控制，我们可以使用以下属性分别为每侧设置边距。

• margin-top
• margin-right
• margin-bottom
• margin-left

在下面的示例中，我们设置了具有类"容器"的div元素各边的边距。

div.container {
	margin-top : 30px;
	margin-right : 15px;
	margin-bottom : 10px;
	margin-left : 5%;
}

边距速记

我们可以使用以下速记来设置每边的边距。

div {
	margin : 30px 15px 10px 5%;
}

上面的规则将设置：

• 上边距= 30px
• 右边距= 15px
• 底边距= 10px
• 左边距= 5％

div {
	margin : 30px 15px 10px;
}

上面的规则将设置：

• 上边距= 30px
• 右边距= 15px
• 底边距= 10px
• 左边距= 15px

div {
	margin : 30px 15px;
}

上面的规则将设置：

• 上边距= 30px
• 右边距= 15px
• 底边距= 30px
• 左边距= 15px

div {
	margin : 30px;
}

上面的规则将设置：

• 上边距= 30px
• 右边距= 30px
• 底边距= 30px
• 左边距= 30px

继承边距

在以下示例中，子元素将从父元素继承边距。

div.container {
	margin : 15px;
}

div.container p {
	margin : inherit;
}

使用自动居中

为了使元素居中，我们可以将元素的左边和右边距属性的值设置为" auto"，还可以设置width属性。
如果未设置width，则该元素将占用其容器的整个宽度。

在以下示例中，我们将具有类center-container的div元素居中。

div.center-container {
	width : 300px;
	margin : 15px auto;
}

上面的规则将设置：

• 宽度= 300px
• 边距顶部= 15px
• 右边距=自动
• 底边距= 15px
• 左边距=自动