CSS内边距

CSS 填充

CSSpadding属性是用来生成周围内容的空间。

填充清除元素的内容（边框内部）周围的区域.

使用CSS填充，可以全部设置填充，也可以单独为顶部、底部、左、右设置填充。

填充 - 单独边设置

CSS可以为一个元素的每个边设置填充属性：

• padding-top
• padding-right
• padding-bottom
• padding-left

所有填充属性可以使用以下值:

• 长度 - 使用 px, pt, cm等长度单位指定一个长度.
• 百分比 - 使用容器宽度百分比
• 继承 - 继承父元素的填充

下面的示例为一个<p>元素设置不同的填充:

p {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}

让我试试

填充 - 缩写属性

若要缩短代码，可以在一个属性中指定所有填充属性。

padding 属性是下列单个填充属性的简写属性:

• padding-top
• padding-right
• padding-bottom
• padding-left

p {
    padding: 50px 30px 50px 80px;
}

让我试试

看看他们是如何工作的:

如果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

div.ex1 {
    padding: 25px 50px 75px 100px;
}

div.ex2 {
    padding: 25px 50px 75px;
}

div.ex3 {
    padding: 25px 50px;
}

div.ex4 {
    padding: 25px;
}

让我试试

All CSS Padding Properties