码农教程 - 一技在手,衣食无忧! tools

目录

CSS 外边距

❮ 上一节 下一节 ❯

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

该元素的外边距为 70 像素。
亲自试一试 »

CSS 外边距

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

使用 CSS，您可以完全控制外边距。有一些属性可用于设置元素每一侧（顶部、右侧、底部和左侧）的外边距。

外边距 - 各边

CSS 具有指定元素每一侧外边距的属性：

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

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

  • auto - 浏览器计算外边距
  • 长度- 指定外边距，单位为 px、pt、cm 等。
  • %- 指定包含元素宽度的% 的外边距
  • 继承 - 指定外边距应从父元素继承

提示：允许负值。

示例

为 <p> 元素的所有四个边设置不同的外边距：

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}
亲自试一试 »

外边距 - 简​​写属性

为了缩短代码，可以在一个属性中指定所有外边距属性。

这个marginproperty 是以下各个外边距属性的简写属性：

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

那么，它的工作原理如下：

如果margin属性有四个值：

  • 外边距：25 像素 50 像素 75 像素 100 像素；
    • 上外边距为 25px
    • 右外边距是 50px
    • 下外边距为 75px
    • 左外边距为 100 像素

示例

使用具有四个值的 margin 简写属性：

p {
  margin: 25px 50px 75px 100px;
}
亲自试一试 »

如果margin属性具有三个值：

  • 外边距：25 像素 50 像素 75 像素；
    • 上外边距为 25px
    • 左右外边距均为 50px
    • 下外边距为 75px

示例

使用具有三个值的 margin 简写属性：

p {
  margin: 25px 50px 75px;
}
亲自试一试 »

如果margin属性有两个值：

  • 外边距：25 像素 50 像素；
    • 顶部和底部外边距均为 25px
    • 左右外边距均为 50px

示例

使用具有两个值的 margin 简写属性：

p {
  margin: 25px 50px;
}
亲自试一试 »

如果margin属性有一个值：

  • 外边距：25 像素；
    • 所有四个外边距均为 25px

示例

使用具有一个值的 margin 简写属性：

p {
  margin: 25px;
}
亲自试一试 »

auto值

您可以将外边距属性设置为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;
}
亲自试一试 »

所有 CSS 外边距属性

Property Description
margin A shorthand property for setting all the margin properties in one declaration
margin-bottom Sets the bottom margin of an element
margin-left Sets the left margin of an element
margin-right Sets the right margin of an element
margin-top Sets the top margin of an element

❮ 上一节 下一节 ❯