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
  • 注意:负值是不允许的。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <style>
    p.ex1 {
    background-color: yellow;
    padding: 40px;
    }
    p.ex2 {
    background-color: yellow;
    padding: 5px 60px;
    }
    </style>
    1
    2
    <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
  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
    p {
    background-color: yellow;
    }
    p.padding {
    padding-top: 25px;
    padding-bottom: 25px;
    padding-right: 50px;
    padding-left: 50px;
    }
    </style>
    1
    2
    <p>这是一个没有指定填充边距的段落。</p>
    <p class="padding">这是一个指定填充边距的段落。</p>
  • 效果

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


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

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

  • 使用 厘米值 设置边距

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    <style>
    p.ex1 {
    padding: 1cm;
    }
    p.ex2 {
    padding: 0.5cm 3cm;
    }
    </style>
    1
    2
    <p class="ex1">这个文本两边的填充边距一样。每边的填充边距为 1 厘米。</p>
    <p class="ex2">这个文本的顶部和底部填充边距都为 0.5 厘米,左右的填充边距为 3 厘米。</p>
  • 效果

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


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

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

  • 使用 百分比值 设置边距

  • 实例

    1
    2
    3
    4
    5
    <style>
    p.bottompadding {
    padding-bottom: 5%;
    }
    </style>
    1
    2
    3
    <p>这是一个没有指定边距大小的段落。</p>
    <p class="bottompadding">这是一个指定下边距大小的段落。</p>
    <p style="margin-top: -10px;">这是一个没有指定边距大小的段落。</p>
  • 效果

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


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


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

5、CSS 实例

文章目录
  1. 1. 前言
  2. 2. 1、简写属性
  3. 3. 2、单边内边距属性
  4. 4. 3、使用 厘米值 设置内边距
  5. 5. 4、使用 百分比值 设置内边距
  6. 6. 5、CSS 实例
隐藏目录