边距用于在元素周围、任何定义的边界之外创建空间。
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 70px;
border: 1px solid #4CAF50;
}
</style>
</head>
<body>
<h2>CSS Margins</h2>
<div>This element has a margin of 70px.</div>
</body>
</html>
CSS margin
属性用于在元素周围创建空间, 在任何定义的边界之外。
使用 CSS,您可以完全控制边距。有属性 用于设置元素每一侧的边距(顶部、右侧、底部和左侧)。
CSS 具有指定每个边距的属性 元素的侧面:
margin-top
margin-right
margin-bottom
margin-left
所有边距属性都可以具有以下值:
auto - 浏览器计算边距
length - 指定边距,单位为 px、pt、cm 等。
% - 指定包含元素宽度百分比的边距
继承 - 指定边距应从父元素继承
提示:允许使用负值。
为 <p> 元素的所有四个边设置不同的边距:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Using individual margin properties</h2>
<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>
</body>
</html>
为了缩短代码,可以在中指定所有边距属性 一项财产。
margin
属性是以下各个边距属性的简写属性:
margin-top
margin-right
margin-bottom
margin-left
那么,它的工作原理如下:
如果 margin
属性有四个值:
margin: 25px 50px 75px 100px;
上边距为 25px
右边距是 50px
下边距为 75px
左边距为 100 像素
使用具有四个值的 margin 简写属性:
p {
margin: 25px 50px 75px 100px;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px 50px 75px 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The margin shorthand property - 4 values</h2>
<div>This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a left margin of 100px.</div>
<hr>
</body>
</html>
如果 margin
属性具有三个值:
margin: 25px 50px 75px;
上边距为 25px
左右边距均为 50px
下边距为 75px
使用具有三个值的 margin 简写属性:
p { margin: 25px 50px 75px;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px 50px 75px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The margin shorthand property - 3 values</h2>
<div>This div element has a top margin of 25px, a right and left margin of 50px, and a bottom margin of 75px.</div>
<hr>
</body>
</html>
如果 margin
属性有两个值:
margin: 25px 50px;
顶部和底部边距均为 25px
左右边距均为 50px
使用具有两个值的 margin 简写属性:
p { margin: 25px 50px;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px 50px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The margin shorthand property - 2 values</h2>
<div>This div element has a top and bottom margin of 25px, and a right and left margin of 50px.</div>
<hr>
</body>
</html>
如果 margin
属性只有一个值:
margin: 25px;
所有四个边距均为 25px
使用具有一个值的 margin 速记属性:
p {
margin: 25px;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The margin shorthand property - 1 value</h2>
<div>This div element has a top, bottom, left, and right margin of 25px.</div>
<hr>
</body>
</html>
您可以将 margin 属性设置为 auto
以使元素在其容器内水平居中。
然后该元素将占据指定的宽度,剩余空间 将在左右边距之间平均分配。
使用边距:自动:
div {
width: 300px;
margin:
auto;
border: 1px solid red;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
</style>
</head>
<body>
<h2>Use of margin: auto</h2>
<p>You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:</p>
<div>
This div will be horizontally centered because it has margin: auto;
</div>
</body>
</html>
此示例让
元素的左边距从父元素继承 (<div>):
继承值的使用:
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left:
inherit;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
</style>
</head>
<body>
<h2>Use of the inherit value</h2>
<p>Let the left margin be inherited from the parent element:</p>
<div>
<p class="ex1">This paragraph has an inherited left margin (from the div element).</p>
</div>
</body>
</html>
用于在一个声明中设置所有边距属性的简写属性
设置元素的下边距
设置元素的左边距
设置元素的右边距
设置元素的上边距