[分享]css列表与文本之间删除行距

 在网页设计和开发过程中，列表和文本排版都是非常常见的。然而，有时候我们会发现列表中的文字与前面的文本之间有一定的行距，给页面造成不必要的空白感。本文将介绍如何利用CSS来删除列表和文本之间的行距。在...

 在网页设计和开发过程中，列表和文本排版都是非常常见的。然而，有时候我们会发现列表中的文字与前面的文本之间有一定的行距，给页面造成不必要的空白感。本文将介绍如何利用CSS来删除列表和文本之间的行距。
在CSS中，我们可以使用属性`margin`来设置元素之间的外边距，而`line-height`属性用于设置行高。因此，要想删除列表和文本之间的行距，我们需要将列表前面的空白处（即`margin`）设置为0，并将行高（即`line-height`）设置为与文本一致。
下面是一个例子，代码使用`pre`标签：

<style>
p {
  line-height: 1.2em;
}
ul {
  margin-top: 0;
}
</style>

<p>这是一段文本。</p>
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul> 

我们可以看到，以上代码删除了列表和文本之间的行距。如果您的页面中有更多的列表和文本，并且您想要一次性应用此样式，您可以在CSS中为`ul`添加一个通用样式，并将其应用于所有的列表元素。例如：

<style>
p {
  line-height: 1.2em;
}
ul, ol {
  margin-top: 0;
}
</style> 

总之，通过使用CSS中的`margin`和`line-height`属性，我们可以轻松地删除列表和文本之间的行距，让网页更美观和统一。