CSS 内边距

CSS边距

CSS padding属性用于在任何已定义边框内部生成元素内容周围的空间。使用CSS，您可以完全控制填充(内边距)。有一些属性可以为元素的每一侧（顶部，右侧，底部和左侧）设置内边距。

此元素的填充为70px。

内边距 - 单个内边距

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<

div {
 border: 1px solid black;
 padding: 25px 50px 75px 100px;
 background-color: lightblue;
}

尝试一下

如果padding属性有三个值：

padding：25px 50px 75px;

上内边距是25px
左内右内边距为50px
下内边距为75px

div {
 border: 1px solid black;
 padding: 25px 50px 75px;
 background-color: lightblue;
}

尝试一下

如果padding属性有两个值：

padding：25px 50px;

上下内边距为25px
左右内边距为50px

div {
 border: 1px solid black;
 padding: 25px 50px;
 background-color: lightblue;
}

尝试一下

如果padding属性有一个值：

padding：25px;

四面内边距为25px

div {
 border: 1px solid black;
 padding: 25px;
 background-color: lightblue;
}

尝试一下

填充和元素宽度

CSS width属性指定元素内容区域的宽度。内容区域是元素的填充，边框和边距内的部分（框模型）。因此，如果元素具有指定的宽度，则添加到该元素的填充将添加到元素的总宽度。这通常是不希望的结果。在以下示例中，<div>元素的宽度为300px。但是，<div>元素的实际渲染宽度将为350px（300px + 25px左边填充+25px右边填充）：

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

尝试一下

要将宽度保持在300px，无论填充量多少，您都可以使用box-sizing属性。这导致元素保持其宽度; 如果增加填充，可用内容空间将减少。这是一个例子：

div.ex2 {
 width: 300px;
 padding: 25px;
 box-sizing: border-box;
 background-color: lightblue;
}

尝试一下

所有CSS内边距属性

属性	描述
padding	在一个声明中设置所有内边距属性的简写属性
padding-bottom	设置元素的底部填充
padding-left	设置元素的左填充
padding-right	设置元素的右填充
padding-top	设置元素的顶部填充

CSS边距

内边距 - 单个内边距

内边距 - 简写属性

填充和元素宽度

所有CSS内边距属性

相关页面