css中的ul为什么不靠上

在CSS中，

<ul>

是一个常用的列表标记，常用于制作网站的导航菜单。然而，在应用CSS样式时，我们常常会遇到一个问题：为什么<ul>不会像<p>那样紧贴着其前面的文本呢？

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

以上代码，在页面中呈现的效果是这样的：

这是一段文本

• 列表项1
• 列表项2
• 列表项3

我们可以发现，<ul>和前面的文本之间留出了一定的空隙。这是因为<ul>标记默认的样式有一定的外边距，使其不会紧贴着前面的文本显示。

要解决这一问题，可以使用以下CSS样式来消除<ul>的外边距：

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

上述样式将<ul>的外边距和内边距都设置为0，同时取消了列表的样式，使其可以与前面的文本贴合显示。

总之，在应用CSS样式时，需要注意<ul>默认样式会对页面显示造成影响，需要进行相应的样式调整，以达到更好的显示效果。