下面的示例演示可用于将边距应用于任何HTML元素的各种CSS属性。
边距定义元素周围的空间。CSS边距的指定方式与边框类似-它们可以为每一侧单独设置，也可以一次为所有边设置。文章源自淘咖首码项目网-https://www.youranweb.com/259.html
设置所有边距
<!DOCTYPE html>
<title>Example</title>
<style>
div {
border: 1px solid orange;
}
div > p {
background: gold;
margin: 20px;
}
</style>
<div>
<p>
该文本在所有四个面上都有20个像素的边距。它嵌套在带有边框的div中，以便更容易看到边距的效果。
</p>
</div>设置每侧的边距
如果不希望将边距设置应用于所有四条边，或者希望每条边应用不同的边距，则可以使用以下属性：文章源自淘咖首码项目网-https://www.youranweb.com/259.html
- 上边距：margin-top
- 右边距：margin-right
- 边距-底部：margin-bottom
- 左边距：margin-left
例：
<!DOCTYPE html>
<title>Example</title>
<style>
p {
background: gold;
}
.left-margin {
margin-left: 60px;
}
</style>
<p class="left-margin">
This text has a left margin of 60 pixels.
</p>
<p>
This text has no left margin set.
</p>速记属性
此方法使用速记属性在一个位置设置上边距：margin-top、右边距：margin-right、下边距：margin-bottom和左边距：margin-left。此方法更快。它还比以前的方法使用更少的代码。实际上，它与我们在第一个示例中使用的属性相同（即margin属性）。唯一的区别是我们对它应用多个值。文章源自淘咖首码项目网-https://www.youranweb.com/259.html
<!DOCTYPE html>
<title>Example</title>
<style>
div {
border: 10px solid lightblue;
}
div > p {
border: 1px dotted orange;
margin: 20px 50px 10px 30px;
}
</style>
<div>
<p>
此文本的每一面都有不同大小的边距。它嵌套在带有边框的“div”中，以便于查看边距的效果。
</p>
</div>变化
您不需要为所有四条边提供不同的值。可以提供一个、两个、三个或四个值。以下是它的工作原理：文章源自淘咖首码项目网-https://www.youranweb.com/259.html
如果只有一个值，则它适用于所有边。如果有两个值，则上边距和下边距设置为第一个值，右边距和左边距设置为第二个值。如果有三个值，则顶部设置为第一个值，左侧和右侧设置为第二个值，底部设置为第三个值。如果有四个值，它们将分别应用于顶部、右侧、底部和左侧。文章源自淘咖首码项目网-https://www.youranweb.com/259.html
换句话说：文章源自淘咖首码项目网-https://www.youranweb.com/259.html
边距：10像素;文章源自淘咖首码项目网-https://www.youranweb.com/259.html
所有四条边的边距均为10像素。文章源自淘咖首码项目网-https://www.youranweb.com/259.html
边距：10像素20像素;文章源自淘咖首码项目网-https://www.youranweb.com/259.html
顶部和底部的边距为10像素。文章源自淘咖首码项目网-https://www.youranweb.com/259.html
左右两边距为20像素。文章源自淘咖首码项目网-https://www.youranweb.com/259.html
边距：10像素20像素30像素;文章源自淘咖首码项目网-https://www.youranweb.com/259.html
顶部是10px文章源自淘咖首码项目网-https://www.youranweb.com/259.html
左边和右边是20px文章源自淘咖首码项目网-https://www.youranweb.com/259.html
底部为30px文章源自淘咖首码项目网-https://www.youranweb.com/259.html
边距：10像素20像素30像素40像素;文章源自淘咖首码项目网-https://www.youranweb.com/259.html
顶部是10px文章源自淘咖首码项目网-https://www.youranweb.com/259.html
右边是20px文章源自淘咖首码项目网-https://www.youranweb.com/259.html
底部为30px文章源自淘咖首码项目网-https://www.youranweb.com/259.html
左边是40px文章源自淘咖首码项目网-https://www.youranweb.com/259.html
评论