如何在 CSS 中添加垂直边距

在编写 CSS 样式时，经常需要为元素添加垂直边距来控制元素之间的空隙。本文将介绍三种常用的添加垂直边距的方法。

方法一：使用 margin

margin 是用来控制元素与外部元素之间的距离，或者控制元素内部各个框之间的距离。要在元素的顶部和底部添加垂直边距，可以使用 margin-top 和 margin-bottom 属性。

例如，为一个 div 元素添加上下各 20px 的垂直边距：

div {
  margin-top: 20px;
  margin-bottom: 20px;
}

方法二：使用 padding

padding 用来控制元素内部内容与边框之间的距离。如果你想为元素添加固定的垂直边距，也可以使用 padding-top 和 padding-bottom 属性。

例如，为一个 p 元素添加上下各 10px 的垂直边距：

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

方法三：使用 line-height

line-height 是用来控制文本行之间的距离，如果你想为文本添加垂直边距，可以使用 line-height 属性。

例如，为一个 p 元素中的文本添加上下各 10px 的垂直边距：

p {
  line-height: 1.5;
  padding-top: 10px;
  padding-bottom: 10px;
}

在这里，我们将 line-height 设置为 1.5，这将使文本的行间距增加，从而实现垂直边距的效果。

总的来说，以上三种方法都可以用来为元素添加垂直边距，具体使用哪种方法取决于你的具体需求。希望本文能对你有所帮助！