CSS 内边距
内边距用于在元素的任何定义的边框内部,在其内容周围创建空间。
自己动手试一试 »
CSS 内边距
CSS padding
属性用于在元素的任何定义的边框内部,在其内容周围创建空间。
使用 CSS,您可以完全控制内边距。有用于设置元素每侧内边距(上、右、下、左)的属性。
内边距 - 单独的边
CSS 具有用于指定元素每侧内边距的属性
padding-top
padding-right
padding-bottom
padding-left
所有内边距属性都可以具有以下值
- length - 以 px、pt、cm 等为单位指定内边距。
- % - 指定包含元素的宽度的百分比作为内边距。
- inherit - 指定内边距应从父元素继承。
注意:不允许负值。
示例
为 <div> 元素的四个侧面设置不同的内边距:
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
自己动手试一试 »
内边距 - 简写属性
为了缩短代码,可以将所有内边距属性写在一个属性中。
padding
属性是以下单独内边距属性的简写属性
padding-top
padding-right
padding-bottom
padding-left
所以,它是这样工作的
如果 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
内边距和元素宽度
CSS width
属性指定元素内容区域的宽度。内容区域是元素内边距、边框和外边距内部的部分(盒子模型)。
因此,如果一个元素指定了宽度,添加到该元素的内边距将计入元素的总宽度。这通常是用户不希望的结果。
示例
在这里,<div> 元素的宽度被设为 300px。但是,<div> 元素的实际宽度将是 350px(300px + 25px 的左内边距 + 25px 的右内边距)。
div {
width: 300px;
padding: 25px;
}
自己动手试一试 »
要使宽度保持在 300px,无论内边距多少,您都可以使用 box-sizing
属性。这会导致元素保持其实际宽度;如果您增加内边距,可用内容空间将减小。
示例
使用 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 | 设置元素的上内边距 |