CSS 外边距

CSS边距

CSS margin属性用于在任何已定义边框之外的元素周围创建空间。使用CSS，您可以完全控制边距。有一些属性可用于设置元素每一边的边距（顶部，右侧，底部和左侧）。

CSS具有用于指定元素每一边的边距的属性：

所有边距属性都可以具有以下值：

提示：允许使用负值。以下示例为<p>元素的所有四个边设置不同的边距：

p {
 margin-top: 100px;
 margin-bottom: 100px;
 margin-right: 150px;
 margin-left: 80px;
}

尝试一下

要缩短代码，可以在一个属性中指定所有边距属性。 margin属性是以下单个边距属性的简写属性：

它的工作原理：如果margin属性有四个值：

margin：25px 50px 75px 100px;

div {
 border: 1px solid black;
 margin: 25px 50px 75px 100px;
 background-color: lightblue;
}

尝试一下

如果margin属性有三个值：

margin：25px 50px 75px;

div {
 border: 1px solid black;
 margin: 25px 50px 75px;
 background-color: lightblue;
}

尝试一下

如果margin属性有两个值：

margin：25px 50px;

div {
 border: 1px solid black;
 margin: 25px 50px;
 background-color: lightblue;
}

尝试一下

如果margin属性有一个值：

margin：25px;

div {
 border: 1px solid black;
 margin: 25px;
 background-color: lightblue;
}

尝试一下

您可以将margin属性设置为auto在其容器内水平居中元素。然后元素将占用指定的宽度，剩余的空间将在左右边距之间平均分配：

div {
 width:300px;
 margin: auto;
 border: 1px solid red;
}

尝试一下

此示例允许<p class=“ex1”>元素的左边距从父元素（<div>）继承：

div {
 border: 1px solid red;
 margin-left: 100px;
}

p.ex1 {
 margin-left: inherit;
}

尝试一下

元素的顶部和底部边距有时会折叠成一个边距，该边距等于两个边距中的最大边距。这不会发生在左右边距！只有顶部和底部边距！请看以下示例：

h1 {
 margin: 0 0 50px 0;
}

h2 {
 margin: 20px 0 0 0;
}

尝试一下