CSS 填充
填充用于在任何定义的边框内围绕元素的内容创建空间。
此元素的填充为 70px。
亲自尝试 »
CSS 填充
CSS padding
属性用于在任何定义的边框内围绕元素内容生成空间。
使用 CSS,您可以完全控制填充。有一些属性可用于设置元素各边的填充(顶部、右侧、底部和左侧)。
填充物 - 单独侧面
CSS 具有用于指定元素每侧填充的属性:
padding-top
padding-right
padding-bottom
padding-left
所有填充属性都可以具有以下值:
- 长度 - 以 px、pt、cm 等为单位指定填充。
- % - 指定包含元素宽度的百分比填充
- inherit - 指定应从父元素继承填充
笔记: 不允许使用负值。
Padding - 简写属性
为了缩短代码,可以在一个属性中指定所有填充属性。
这 padding
property 是以下各个填充属性的简写属性:
padding-top
padding-right
padding-bottom
padding-left
它的工作原理如下:
如果 padding
属性有四个值:
- 填充:25px 50px 75px 100px;
- 顶部内边距为 25px
- 右内边距为 50px
- 底部内边距为 75px
- 左内边距为 100px
如果 padding
属性有三个值:
- 填充:25px 50px 75px;
- 顶部内边距为 25px
- 左右内边距均为 50px
- 底部内边距为 75px
如果 padding
属性有两个值:
- 填充:25px 50px;
- 顶部和底部的内边距为 25px
- 左右内边距均为 50px
如果 padding
属性有一个值:
- 填充:25px;
- 所有四个内边距均为 25px
填充和元素宽度
CSS width
属性指定元素内容区域的宽度。内容区域是元素的内边距、边框和外边距内的部分(盒子模型).
因此,如果元素具有指定的宽度,则添加到该元素的填充将添加到元素的总宽度中。 这通常是不理想的结果。
例子
在这里,<div> 元素的宽度为 300px。但是,<div> 元素将为 350px(300px + 25px 左填充 + 25px 右填充):
div {
宽度:300px;
填充:25px;
}
亲自尝试 »
要将宽度保持在 300px,无论填充量是多少,您都可以使用 box-sizing
属性。这会导致元素保持其实际宽度;如果增加填充,可用的内容空间将会减少。
更多示例
设置左填充
此示例演示如何设置<p>元素。
设置正确的填充
此示例演示如何设置<p>元素。
设置顶部填充
此示例演示如何设置<p>元素。
设置底部填充
此示例演示如何设置<p>元素。
所有 CSS 填充属性
财产 | 描述 |
---|---|
填充 | 在一个声明中设置所有填充属性的简写属性 |
内边距底部 | 设置元素的底部填充 |
左填充 | 设置元素的左填充 |
右填充 | 设置元素的右填充 |
顶部填充 | 设置元素的顶部填充 |