CSS 边距


目录

    显示目录


边距用于在元素周围、任何定义的边界之外创建空间。


This element has a margin of 70px.

自己尝试一下 →

<!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 边距

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>



所有 CSS 边距属性

margin

用于在一个声明中设置所有边距属性的简写属性

margin-bottom

设置元素的下边距

margin-left

设置元素的左边距

margin-right

设置元素的右边距

margin-top

设置元素的上边距