最浅显易懂的 CSS 之 边距 - 15

Jeremy_ht
1,407 阅读2分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

css边距分为内边距（padding）和外边距（margin）

image.png

1. margin

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的，margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

margin属性可以有一到四个值。

  • margin:25px 50px 75px 100px;

    • 上边距为25px
    • 右边距为50px
    • 下边距为75px
    • 左边距为100px

  • margin:25px 50px 75px;

    • 上边距为25px
    • 左右边距为50px
    • 下边距为75px

  • margin:25px 50px;

    • 上下边距为25px
    • 左右边距为50px

  • margin:25px;

    • 所有的4个边距都是25px

  • 一个值为上下左右

  • 二个值为上下 左右

  • 三个值为上 左右 下

  • 四个值为上 右 下 左

div {
  border: 1px solid black;
  margin: 25px 50px 75px 100px;
  background-color: pink;
}

image.png

  • auto 值

可以将 margin 属性设置为 auto，以使元素在其容器中水平居中，然后该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配

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

<p>您可以将 margin 属性设置为 auto 以自动将元素在其容器中水平居中。然后，该元素将占据指定的宽度，剩余空间将在左右外边距之间平均分配：</p>

<div>
由于 margin: auto;，这个 div 将水平居中。
</div>

image.png

  • inherit 值

继承自父元素

2. padding

padding 属性用于在任何定义的边界内的元素内容周围生成空间，通过 CSS，您可以完全控制内边距（填充）。有一些属性可以为元素的每一侧（上、右、下和左侧）设置内边距。为元素的每一侧指定内边距的属性：

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
div {
  border: 1px solid black;
  background-color: lightblue;
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

<h1>使用单独的内边距属性</h1>

<div>这个 div 元素的上内边距是 50px，右内边距是 30px，下内边距是 50px，左内边距是 80px。</div>

image.png

如果 padding 属性有四个值：

  • padding: 25px 50px 75px 100px;
    • 上内边距是 25px
    • 右内边距是 50px
    • 下内边距是 75px
    • 左内边距是 100px

如果 padding 属性设置了三个值：

  • padding: 25px 50px 75px;
    • 上内边距是 25px
    • 右和左内边距是 50px
    • 下内边距是 75px

如果 padding 属性设置了两个值：

  • padding: 25px 50px;
    • 上和下内边距是 25px
    • 右和左内边距是 50px

如果 padding 属性设置了一个值：

  • padding: 25px;
    • 所有四个内边距都是 25px
avatar
文章
阅读
粉丝