HTML列表项和段落之间的视觉差异

Question

对于html <li>元素，文本内容在左侧留有一定间距后开始。我不知道该怎么说。但我指的是我用红线画出的空间，如下图所示：

对于<p>元素，文本内容中没有这样的间距。下图：

我不熟悉是否存在一些CSS术语来描述这种效果？

我也很好奇<p>元素内的内容是否可以像<li>元素那样具有这种间距？

谢谢。

Answer 1

在HTML中，ul标记内的li只是我们在纸上写出一个项目列表。我们不会将数字提供给li标签，它会自动添加（您也可以使用CSS禁用此功能）

p标签用于写一个段落，就像我们在论文中写的一样。在此，您输入的号码是

Answer 2

从技术上讲，您的问题的答案是否定的。但是，有一个称为text-indent的CSS段落属性，该属性用于根据您设置的段落来缩进段落的第一个。您可以使用相同的属性并将其赋予负值，从而采用第一行并将其移至段落开始位置之前。然后，您还需要在左边距处移动以匹配负缩进：

p {
  text-indent: -1em;
  margin-left: 1em;
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Answer 3

According to w3school，它们具有不同的默认CSS样式。 li是否显示为列表项，而p是否显示为块。段落也有空白。

Answer 4

在您的<ol>示例中控制缩进的属性是左填充。

您可以通过多种不同方式来模拟带有<p>元素的列表的外观。在我的示例中，我给他们一个共同的父母，他们充当<ol>（或<ul>）并控制缩进。序数可以为CSS pseudo-elements-我使用的是::before，因为它使伪元素处于方便的位置-具有足够的负裕度，可以将它们“拉”入[父母的]左填充。您可以使用CSS Counters自动生成数字。

ol {
  width: 200px;
}

body {
  counter-reset: ordinal;
}

.list-like {
  width: 200px;
  padding: 0 0 0 2.5em;
}

.list-like>p::before {
  counter-increment: ordinal;
  content: counter( ordinal)'.';
  display: inline-block;
  width: 2.25em;
  margin-left: -2.5em;
  text-align: right;
  padding-right: 0.25em;
}

<h1>Ordered List</h1>
<ol>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo delectus accusantium soluta illo ea animi repellat officia esse, quisquam illum!</li>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
</ol>

<h1>Simulated Ordered List</h1>
<div class="list-like">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse ratione, repellat voluptates nisi tempore soluta obcaecati! Nihil culpa earum praesentium!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>