CSS 无序列表 (

ul>) 的默认缩进

在本文中，我们将介绍 CSS 中无序列表 (

ul>) 的默认缩进样式，以及如何通过 CSS 来修改它。

阅读更多：CSS 教程

什么是无序列表 (

ul>)？

无序列表是 HTML 中一种常用的内容展示方式，用于列举条目，通常以项目符号的形式呈现。无序列表使用 <ul> 标签来定义，每个列表项使用 <li> 标签进行包裹。

示例代码如下：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

上述代码会在页面上生成一个包含三个列表项的无序列表，每个列表项前面都会有一个项目符号。

在默认情况下，浏览器会对无序列表进行缩进，以使列表项相对于列表项标记（项目符号）有一定的偏移。这个默认缩进的大小是由浏览器自身决定的，不同浏览器可能会有不同的表现。

如果想要改变无序列表的默认缩进样式，我们可以通过 CSS 来实现。

我们可以使用 margin 属性来改变无序列表项的左外边距（margin-left）以实现缩进效果。通过调整 margin-left 值，我们可以控制列表项相对于列表项标记（项目符号）的偏移量。

示例代码如下：

ul {
  margin-left: 20px; /* 设置列表项的左外边距为 20px */
}

在上述代码中，我们将无序列表的左外边距（margin-left）设置为 20px，这样就会将列表项向右偏移一定的距离，实现缩进效果。

除了使用 margin 属性外，我们还可以使用 padding 属性来改变无序列表项的左内边距（padding-left）以实现缩进效果。通过调整 padding-left 值，我们可以控制列表项内容相对于列表项标记（项目符号）的偏移量。

示例代码如下：

ul {
  padding-left: 20px; /* 设置列表项的左内边距为 20px */
}

在上述代码中，我们将无序列表的左内边距（padding-left）设置为 20px，这样就会将列表项的内容向右偏移一定的距离，实现缩进效果。

在给无序列表的每个列表项设置缩进样式时，我们也可以通过直接对 <li> 标签进行样式设置来进行修改。

示例代码如下：

li {
  margin-left: 20px; /* 设置每个列表项的左外边距为 20px */
}

在上述代码中，我们通过直接给 <li> 标签设置样式，将每个列表项的左外边距（margin-left）设置为 20px，实现所有列表项的缩进效果。

通过本文，我们了解了 CSS 中无序列表 (

ul>) 的默认缩进样式，并展示了两种常用的方法来修改无序列表的缩进效果。通过调整 margin 属性或使用 padding 属性，我们可以轻松地改变无序列表的缩进样式，以满足不同的设计需求。希望本文对您理解和应用无序列表的缩进样式有所帮助。