填充边距和边框

在网页设计中，我们经常需要为元素添加边框和内边距，让页面更加美观。本文主要介绍CSS中的填充边距和边框相关属性。

填充边距（padding）

填充边距是指元素内部与边框之间的距离。我们可以使用padding属性来设置填充边距。

padding: 上 右 下 左;

可以使用像素、百分比和em等单位。

例如，下面的代码将段落元素（<p>）的上下边距设置为10像素，左右边距设置为20像素。

p {
  padding: 10px 20px;
}

如果我们只想为上下或左右设置相同的边距，可以使用一下属性：

• padding-top - 设置上填充边距
• padding-right - 设置右填充边距
• padding-bottom - 设置下填充边距
• padding-left - 设置左填充边距

例如，下面的代码将段落元素的上下填充边距都设置为10像素：

p {
  padding-top: 10px;
  padding-bottom: 10px;
}

边框（border）

边框是指元素周围的线框。我们可以使用border属性来设置边框样式、宽度和颜色。

border: 宽度 样式 颜色;

其中，宽度和样式是必须的参数，颜色是可选的。可以使用像素、em和百分比等单位。

例如，下面的代码将段落元素的边框宽度设置为1像素，样式为实线，颜色为黑色：

p {
  border: 1px solid black;
}

我们也可以分别指定边框的样式、宽度和颜色，使用以下属性：

• border-style - 设置边框样式
• border-width - 设置边框宽度
• border-color - 设置边框颜色

例如，下面的代码将段落元素的左边框设置为2像素宽的实线，颜色为红色：

p {
  border-left: 2px solid red;
}

边框圆角（border-radius）

我们还可以使用border-radius属性设置边框的圆角弧度。可以分别设置上左、上右、下左和下右四个角的圆角半径。

border-radius: 上左 上右 下右 下左;

例如，下面的代码将段落元素的左上角和右下角设置为20像素的圆角。

p {
  border-radius: 20px 0 0 20px;
}

通过上述介绍，我们可以使用CSS的填充边距和边框相关属性为网页添加美观的边框和填充效果。