也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

CSS 行间距

该元素的内边距为 70 像素。

CSS 行距

CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。

使用 CSS，您可以完全控制行间距（填充）。 有一些属性可以为元素的每个右侧（顶部、右侧、底部和两侧）设置填充。

填充 - 单独的边缘

CSS 具有用于指定元素每一侧填充的属性：

所有主要属性都可以设置为以下值：

提示：不允许使用负值。

为了

元素的所有四个边设置不同的填充：

div {
  border: 1px solid black;
  background-color: lightblue;
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}
使用单独的内边距属性
这个 div 元素的上内边距是 50px，右内边距是 30px，下内边距是 50px，左内边距是 80px。

运行

填充 - 简写

为了减少代码量，您可以在一个属性中指定所有主要属性。

padding 属性是以下 padding 属性的缩写属性：

它的工作原理如下：

如果padding属性有四个值：padding: 25px 50px 75px 100px;

使用设置了四个值的 padding 简写：

div {
  border: 1px solid black;
  padding: 25px 50px 75px 100px;
  background-color: lightblue;
}
简写的内边距属性 - 4 个值
这个 div 元素的上内边距是 25px，右内边距是 50px，下内边距是 75px，而左内边距是 100px。

运行

如果padding属性设置了三个值：padding: 25px 50px 75px;

使用设置了三个值的 padding 简写：

div {
  border: 1px solid black;
  padding: 25px 50px 75px;
  background-color: lightblue;
}
简写的内边距属性 - 3 个值
这个 div 元素的上内边距是 25px，左右内边距是 50px，下内边距是 75px。

运行

如果padding属性设置了两个值：padding: 25px 50px;

使用 padding 简写属性设置两个值：

div {
  border: 1px solid black;
  padding: 25px 50px;
  background-color: lightblue;
}
简写的内边距属性 - 2 个值
这个 div 元素的上、下内边距为 25 像素，左、右内边距为 50 像素。

运行

如果padding属性设置了一个值：padding: 25px;

使用带有值集的 padding 简写属性：

div {
  border: 1px solid black;
  padding: 25px;
  background-color: lightblue;
}
简写的内边距属性 - 1 个值
这个 div 元素的上、下、左、右内边距均为 25 像素。

运行

行距和元素间距

CSS width 属性指定元素内容区域的长度。 内容区域是元素（盒模型）内边距、边框和内边距内的部分。

因此，如果某个元素具有指定的长度css 内边距，则添加到该元素的任何填充都将添加到该元素的总长度中。 这通常是不希望的结果。

这里，

元素的长度为 300px。 但，

元素的实际长度将为 350px（300px + 25px 左内边距 + 25px 右内边距）：

div.ex1 {
  width: 300px;
  background-color: yellow;
}
div.ex2 {
  width: 300px;
  padding: 25px;
  background-color: lightblue;
}
内边距和元素宽度
<div class="ex1">这个 div 是 300 像素宽。