有不同的方法可以让你的网页更容易阅读，浏览和消化。添加图片是一个很好的方法。下拉帽也可以工作。
缩进是另一格式化技术，可以帮助在页面上组织和呈现内容。虽然在打印，段落，列表和项目段中更常见，但可以打算在网页上分解内容并提高其可读性。
在这篇文章中，我们将走过你可以缩进不同元素的方式一点代码。我们会覆盖：
- indent CSS
CSS text-indent属性设置文本块的第一行的缩进。它可以用正数或负数来定义。如果值是正的，第一行将向右缩进。如果该值为负数，则第一行将用于左边。
要在CSS中设置文本缩进属性，可以使用长度值或百分比。像PX，PT和EM一样的长度值将定义空间的固定空间。百分比将定义缩进作为父元素宽度的百分比。
让我们来看看如何将此CSS属性使用此CSS属性来缩进文本，段落，列表等。
如何缩进CSS中的文本
您可以使用CSS文本缩进属性在任何块容器中缩进文本，包括divs，标题，asides，文章，blockquotes和列表元素。
假设您希望缩进包含50px右侧的页面上的文本的所有div元素。然后，使用CSS类型选择器DIV，将文本缩义属性设置为50px。这是结果：
看笔由克里斯蒂娜百科（@hubspot.） 在CodePen。
如何缩进CSS段落
您可以使用上面的相同步骤使用CSS文本缩进属性来缩进段落。
只需使用CSS类型选择器p并将text-indent属性设置为您想要的值。在下面的例子中，我们使用百分比。默认情况下，它只缩进第一行。
看笔如何缩进CSS段落由克里斯蒂娜百科（@hubspot.） 在CodePen。
如何在第一段跳过缩进
根据芝加哥风格手册，您可以在子标题之后缩进第一行文本，或者将其置于左侧。
如果您想在副标题齐平后留下第一个段落，但缩进每个后续段落，那么您可以使用相邻的兄弟组合器：P + P。然后将文本缩进属性设置为所需的值。这是结果：
看笔由克里斯蒂娜百科（@hubspot.） 在CodePen。
如何在CSS中缩进列表
默认情况下，有序列表元素(
- )将缩进列表项。如果你想改变缩进距离，你可以使用CSS。在本例中，您不会使用text-indent属性。相反，您将使用margin-left或padding-left属性。
假设您希望将列表项进一步推到右侧，以便与子标题对齐。然后，您可以将填充left属性设置为20EM。以下是与默认缩进的列表相比的结果：
看笔由克里斯蒂娜百科（@hubspot.） 在CodePen。
如何在CSS中排列子弹点
与订购的列表元素一样，无序列表元素（
- ）将缩进其列表项 - 或项目符号 - 默认情况下。如果您想更改缩进距离，则可以使用边缘左或填充左财。
让我们说你想把子弹点进一步推到左边而不是右边。然后，您可以使用边缘左属性并将其设置为负值。结果是与默认缩进的子弹点相比：
看笔由克里斯蒂娜百科（@hubspot.） 在CodePen。
- indent不工作
尝试将文本缩进属性应用于HTML元素时，您可能会遇到一些问题。最常见的问题是您尝试将此属性应用于内联元素而不是块级元素。例如，如果您尝试缩进跨度元素，则属性将无法正常工作。但如果您将属性应用于段落元素或另一个块元素，则会起作用。这是一个例子：
看笔- indent不工作由克里斯蒂娜百科（@hubspot.） 在CodePen。
在CSS中缩进
缩进是一种格式化技术，可以帮助提高网页的可读性。虽然在打印中看到它更常见，但了解如何缩进或改变在线段落，列表和项目集中点的缩进仍然很重要。好消息是它只需要一raybetapp点点HTML和CSS来掌握。
最初发布于2002年6月25日，2011年7:00:00，Updationd 6月25日2021年
话题：
引导和CSS相关文章
