CSS Padding 填充（内边距）

前言

• CSS padding（填充）定义元素边框与元素内容之间的空间，即上下左右的内边距。

  

• 当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

• 单独使用 padding 属性可以改变上下左右的填充。

属性	描述	CSS	备注	🔗
padding	简写属性。设置在一个声明中的所有填充属性	1		🔗
padding-top	设置元素的顶部填充	1		🔗
padding-right	设置元素的右部填充	1		🔗
padding-bottom	设置元素的底部填充	1		🔗
padding-left	设置元素的左部填充	1		🔗

1、简写属性

• 为了缩短代码，有可能使用一个属性中 margin 指定的所有边距属性。这就是所谓的简写属性。

属性	描述	CSS	备注	🔗
padding	简写属性。设置在一个声明中的所有填充属性	1		🔗

• 属性值

值	描述
length	规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px
%	规定基于父元素的宽度的百分比的填充
inherit	指定应该从父元素继承 padding

• padding 简写属性在一个声明中设置所有填充属性。该属性可以有一到四个值。

  • padding: 10px 5px 15px 20px;

    • 上填充是 10px
    • 右填充是 5px
    • 下填充是 15px
    • 左填充是 20px

  • padding: 10px 5px 15px;

    • 上填充是 10px
    • 右填充和左填充是 5px
    • 下填充是 15px

  • padding: 10px 5px;

    • 上填充和下填充是 10px
    • 右填充和左填充是 5px

  • padding: 10px;

    • 所有四个填充都是 10px

• 注意：负值是不允许的。

• 实例

  <style>
      p.ex1 {
          background-color: yellow;
          padding: 40px;
      }
      p.ex2 {
          background-color: yellow;
          padding: 5px 60px;
      }
  </style>

  <p class="ex1">这个文本两边的填充边距一样。每边的填充边距为 40px。</p>
  <p class="ex2">这个文本的顶部和底部填充边距都为 5px，左右的填充边距为 60px。</p>

• 效果

  这个文本两边的填充边距一样。每边的填充边距为 40px。

  
  

  这个文本的顶部和底部填充边距都为 5px，左右的填充边距为 60px。

2、单边内边距属性

• 在 CSS 中，可以指定不同的侧面不同的填充。

属性	描述	CSS	备注	🔗
padding-top	设置元素的顶部填充	1		🔗
padding-right	设置元素的右部填充	1		🔗
padding-bottom	设置元素的底部填充	1		🔗
padding-left	设置元素的左部填充	1		🔗

• 属性值

值	描述
length	规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px
%	规定基于父元素的宽度的百分比的填充
inherit	指定应该从父元素继承 padding

• 实例

  <style>
      p {
          background-color: yellow;
      }
      p.padding {
          padding-top: 25px;
          padding-bottom: 25px;
          padding-right: 50px;
          padding-left: 50px;
      }
  </style>

  <p>这是一个没有指定填充边距的段落。</p>
  <p class="padding">这是一个指定填充边距的段落。</p>

• 效果

  这是一个没有指定填充边距的段落。

  
  

  这是一个指定填充边距的段落。

3、使用 厘米值 设置内边距

• 使用 厘米值 设置边距

• 实例

  <style>
      p.ex1 {
          padding: 1cm;
      }
      p.ex2 {
          padding: 0.5cm 3cm;
      }
  </style>

  <p class="ex1">这个文本两边的填充边距一样。每边的填充边距为 1 厘米。</p>
  <p class="ex2">这个文本的顶部和底部填充边距都为 0.5 厘米，左右的填充边距为 3 厘米。</p>

• 效果

  这个文本两边的填充边距一样。每边的填充边距为 1 厘米。

  
  

  这个文本的顶部和底部填充边距都为 0.5 厘米，左右的填充边距为 3 厘米。

4、使用 百分比值 设置内边距

• 使用 百分比值 设置边距

• 实例

  <style>
      p.bottompadding {
          padding-bottom: 5%;
      }
  </style>

  <p>这是一个没有指定边距大小的段落。</p>
  <p class="bottompadding">这是一个指定下边距大小的段落。</p>
  <p style="margin-top: -10px;">这是一个没有指定边距大小的段落。</p>

• 效果

  这是一个没有指定边距大小的段落。

  
  

  这是一个指定下边距大小的段落。

  
  

  这是一个没有指定边距大小的段落。

5、CSS 实例

• 设置元素的左部填充


• 设置元素的右部填充


• 设置元素的顶部填充


• 设置元素的底部填充


• 在一个声明中的所有填充属性