迹忆客 专注技术分享

这篇文章将探讨在 HTML 文档中缩进文本/列表的多种方法。

块或左角和列表组件中文本行之间的间距量由文本/列表缩进样式确定。 它通常表示一段的开始。

当提到文本时，缩进或缩进是指段落左右页边距之间的距离变化。 将光标移动到行首，然后按键盘上的 Tab 键缩进文本。

HTML 中的列表缩进

HTML 列表用于表达信息列表。 每个列表可以有一个或多个列表组件。

HTML 列表分为三种类型。

无序列表元素 (<ul>) 默认缩进它们的列表项。 如果你想调整缩进距离，你可以用 CSS 来实现。

有两种常用的列表缩进技术。

• margin-left ：该属性用于设置元素左侧的边距区域。 正值使它与邻居保持距离，而负数使它更接近。
• padding-left ：此属性用于指定内容和边框之间的空间量。 padding-left 属性指定元素的左填充（空格）。

在 CSS 中，填充是元素的边框和内容之间的区域，而边距是元素边框周围的区域。

padding 属性控制元素的内部空间，margin 属性控制元素周围的区域。

为了进一步理解前面的概念，请考虑以下示例。

HTML

<ul class="outerUL">
  <li>Tea</li>
  <li>Coffee
    <ul class="innerUL">
    <li>Black coffee</li>
    <li>Green coffee</li>
    </ul>
  </li>
  <li>Milk Shake</li>
</ul>

CSS

.innerUL {
    padding-left: 50px;
}

.outerUL {
    margin-left: 100px;
}

在前面的例子中，我们定义了一个无序列表和一个嵌套的无序列表。 margin-left 属性用于缩进外部列表，padding-left 属性用于缩进内部列表。

在任何与 HTML 兼容的浏览器中运行上面的代码行。