CSS内边距用法介绍(边框和内边距的逻辑属性)

一、内边距的概念

在CSS中，内边距是指包裹在元素内容和边框之间的距离。其本质是元素边缘、元素内容之间的距离。常见的元素包括div、p、ul、ol、li等。通过给元素设置内边距，可以调整元素内容的位置，使其更加美观。内边距有4个方向：上方、右方、下方、左方，可以单独设置。如果直接设置内边距，则四个方向的内边距均相等。

二、设置内边距的方法

内边距的设置主要有两种方法：

1、使用属性缩写：padding: 上下 左右;

2、使用单个属性进行设置：padding-top、padding-right、padding-bottom、padding-left。

属性缩写时，四个方向可以分别设置不同的数值，数字之间用空格分隔。也可以使用百分数和em单位。

.example {
  padding: 10px 20px;
}

单个属性进行设置时，只需在属性名后加上方向的关键字即可。设置的值可以是像素、百分数、em等。

.example {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

三、内边距的影响

1、影响元素的总宽度和高度

元素的总宽度和高度等于元素自身的宽度和高度加上内边距的宽度和高度，再加上边框的宽度。

.example {
  width: 100px;
  height: 80px;
  padding: 10px;
  border: 1px solid #000;
}

上述代码中，元素实际的宽度为122px（100+2*10+2*1），实际的高度为102px（80+2*10+2*1）。

2、影响元素内容的位置

元素的内容将沿用内边距来确定位置。

.example {
  padding: 20px;
}
.example p {
  margin: 0;
}

上述代码中，给元素设置了内边距为20px，使得p元素与实际边框的距离为20px。同时，由于p元素默认有margin，需要将其设为0，才能让元素内容与内边距之间没有多余的空白。

3、影响元素背景的填充

给元素设置内边距会影响元素的背景填充。

.example {
  padding: 20px;
  background-color: #ccc;
}

上述代码中，元素的背景颜色为#ccc，且给元素设置了内边距为20px，此时可以看到元素背景颜色在实际的边框内部，填充了内边距的空白区域。

四、内边距的常见应用

1、分隔线效果

内边距可以用于实现分隔线的效果。

.line {
  border-top: 1px solid #ccc;
  padding-top: 10px;
  margin-top: 10px;
}

上述代码中，使用了一个1px粗细、颜色为#ccc的上边框作为分隔线。为了使分隔线在元素顶部，使用了padding-top来实现上移效果，并通过margin-top设置了上外边距。

2、设置按钮样式

内边距可以用于设置按钮样式，为按钮增加一定的边距并设置背景颜色。

.button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
}
.button:hover {
  background-color: #0069d9;
}

以上代码中，设置了padding、background-color、color、border-radius等属性，使得按钮具有了圆角、背景等样式特征。当鼠标悬浮在按钮上时，会有背景颜色飞入的效果。

3、设置表格样式

内边距可以用于设置表格样式，在表格单元格中间添加空白。

table {
  border-collapse: collapse;
}
td {
  padding: 10px;
  border: 1px solid #ccc;
}

上述代码中，给表格单元格设置了padding，使单元格内容较轻松地与边框距离，同时使相邻的单元格之间有一定的空白，从视觉上更加清晰明了。