二维码
搜索 ×

CSS 边距

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

CSS 边距

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

CSS 边距

CSS 属性用于在元素周围创建空间， 在任何定义的边界之外。margin

使用 CSS，您可以完全控制边距。有属性 用于设置元素每侧（上、右、下和左）的边距。

边距 - 单边

CSS 具有用于指定每个 元素的侧面：

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

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

  • auto - 浏览器计算保证金
  • length - 以 px、pt、cm 等为单位指定边距。
  • %- 指定包含元素宽度的边距（以 % 为单位）
  • inherit - 指定边距应继承自父元素

提示： 允许使用负值。

1
2
3
4
5
6
为 <p> 元素的所有四个边设置不同的边距：

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

Margin - Shorthand 属性

为了缩短代码，可以在 一个属性。

该属性是以下单个边距属性的简写属性：margin

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

因此，这是它的工作原理：

如果该属性有四个值：margin

  • 边距：25px 50px 75px 100px;
    • 上边距为 25px
    • 右边距为 50px
    • 下边距为 75px
    • 左边距为 100px
1
2
3
使用具有四个值的margin属性：

p {  margin: 25px 50px 75px 100px;}

如果该属性有三个值：margin

  • 边距：25px 50px 75px;
    • 上边距为 25px
    • 左右边距为 50px
    • 下边距为 75px
1
2
3
使用具有三个值的margin属性：

p {  margin: 25px 50px 75px;}

如果该属性有两个值：margin

  • 边距：25px 50px;
    • 上边距和下边距为 25px
    • 左右边距为 50px
1
2
3
使用具有两个值的 margin属性：

p {  margin: 25px 50px;}

如果属性有一个值：margin

  • 边距：25px;
    • 所有四个边距均为 25px
1
2
3
使用具有一个值的 margin属性：

p {  margin: 25px;}

自动值

可以将 margin 属性设置为将元素在其容器内水平居中。auto

然后，该元素将占用指定的宽度和剩余空间 将在左边距和右边距之间平均分配。

1
2
3
4
5
使用边距： auto：

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

继承值

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

1
2
3
4
5
6
继承值的使用：

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

p.ex1 {  margin-left: inherit;}

所有 CSS 边距属性

属性 说明
margin 设置所有边距属性
margin-bottom 设置元素的下边距
margin-left] 设置元素的左边距
margin-right 设置元素的右边距
margin-top 设置元素的上边距

推荐教程