二维码
搜索 ×

CSS 内边距

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

CSS 内边距

内边距用于在任何定义的边框内围绕元素的内容创建空间。

CSS 内边距

CSSpadding属性用于生成周围的空间 元素的内容，位于任何定义的边框内。

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

衬垫 - 单边

CSS 具有用于指定每个内边距的属性 元素的侧面：

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

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

  • 长度 - 以 px、pt、cm 等为单位指定内边距。
  • %- 指定内边距（以包含元素宽度的百分比为单位）
  • inherit - 指定内边距应继承自父元素

注意： 不允许使用负值。

1
2
3
4
5
6
为 <div> 元素的所有四个边设置不同的内边距：

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

Padding - Shorthand 属性

为了缩短代码，可以在 一个属性。

padding：该属性是以下个人的简写属性 内边距属性。

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

因此，这是它的工作原理：

如果该属性有四个值：padding

  • 内边距：25px 50px 75px 100px;
    • 顶部内边距为 25px
    • 右边距为 50px
    • 底部内边距为 75px
    • 左边距为 100px
1
2
3
使用具有四个值的 padding 属性：

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

如果该属性有三个值：padding

  • 内边距：25px 50px 75px;
    • 顶部内边距为 25px
    • 左右内边距为 50px
    • 底部内边距为 75px
1
2
3
使用具有三个值的 padding 属性：

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

如果该属性有两个值：padding

  • 内边距：25px 50px;
    • 顶部和底部内边距为 25px
    • 左右内边距为 50px
1
2
3
使用具有两个值的 padding 属性：

div {  padding: 25px 50px;}

如果属性有一个值：padding

  • 内边距：25px;
    • 所有四个内边距都是 25px
1
2
3
使用具有一个值的 padding 属性：

div {  padding: 25px;}

内边距和元素宽度

CSSwidth属性指定元素内容区域的宽度。这 内容区域是元素的内边距、边框和边距内的部分 （[盒子模型](/markdown/CSS/Box_Model.md）。

因此，如果元素具有指定的宽度，则添加到该元素的内边距将 添加到元素的总宽度中。这通常是一个不受欢迎的结果。

1
2
3
4
在这里，<div> 元素的宽度为 300px。 但是，<div> 元素的实际宽度将为 350px （300px + 25px 的左边距 + 25px 的右边距）：

div {  width: 300px;  
  padding: 25px;}

box-sizing：若要将宽度保持在 300px，无论内边距量如何，都可以使用该属性。这会导致元素保持其实际宽度;如果 增内边距充，可用内容空间将减少。

1
2
3
4
5
使用 box-sizing 属性将宽度保持在 300px：

div {  width: 300px;  
  padding: 25px;  
  box-sizing: border-box;}

更多示例

此示例演示如何设置 <p> 元素的左内边距充。

此示例演示如何设置 <p> 元素的右内边距充。

此示例演示如何设置 <p> 元素的顶部内边距充。

此示例演示如何设置 <p> 元素的底部内边距充。

所有 CSS 内边距属性

属性 说明
padding 用于在一个声明中设置所有内边距属性
padding-bottom 设置元素的底部内边距
padding-left 设置元素的左内边距
padding-right 设置元素的右内边距
padding-top 设置元素的顶部内边距

推荐教程