<p>：段落元素

<p>
  Geckos are a group of usually small, usually nocturnal lizards. They are found
  on every continent except Antarctica.
</p>

<p>
  Some species live in houses where they hunt insects attracted by artificial
  light.
</p>

p {
  margin: 10px 0;
  padding: 5px;
  border: 1px solid #999;
}

<p>这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。</p>
<p>这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。</p>

<p>
  用空行分隔段落最便于读者扫描，但也可以通过缩进首行来分隔段落。这样做通常是为了减少所占空间，例如节省印刷用纸。
</p>

<p>
  学校试卷和草稿等需要编辑的写作，会同时使用空行和缩进进行分隔。在完成的作品中，将两者结合起来会被认为是多余和业余的。
</p>

<p>
  在非常古老的文字中，段落之间用一种特殊的字符：¶（称为<i>段落符号</i>）分隔。如今，这个符号太密集了，难以阅读。
</p>

<p>
  究竟有多难阅读？自己试一下：
  <button data-toggle-text="换回去！">使用段落符号分隔段落</button>
</p>

p {
  margin: 0;
  text-indent: 3ch;
}

p.pilcrow {
  text-indent: 0;
  display: inline;
}
p.pilcrow + p.pilcrow::before {
  content: " ¶ ";
}

document.querySelector("button").addEventListener("click", (event) => {
  document.querySelectorAll("p").forEach((paragraph) => {
    paragraph.classList.toggle("pilcrow");
  });

  [event.target.innerText, event.target.dataset.toggleText] = [
    event.target.dataset.toggleText,
    event.target.innerText,
  ];
});

p {
  margin-bottom: 2em; /* 增加段落之后的空白 */
}