html - 详细信息标签文本不响应 css 边距

Question

无论我如何尝试添加详细信息标签的文本都不会遵守 margin-left 样式。

一些不工作的 html 文本

p1 {
  text-align: center;
  color: silver;
  font-size: 100%;
  font-family: "Times New Roman", Times, serif;
}

p2 {
  margin-left: ;
  text-align: left;
  color: silver;
  font-size: 100%;
  font-family: "Times New Roman", Times, serif;
}

details,
summary {
  margin-left: 20%;
  color: silver;
  font-size: 110%;
  font-family: "Times New Roman", Times, serif;
}

<main>
  <p> Below are some of the most improtant, or amusing, characters in the Skyrim game. A brief description of the charcter and a quote they made or one referenceing them is also mporvided under their name. They are arranged in alphabetical order, not in order
    of significance. Some information is omitted to prevent spoiling important events in the game or because the information changes depending on the choices that you make. </p>

  <details>
    <summary> Alduin </summary>
    <p1> "Bahloki nahkip sillesejoor (My hunger will be fed by mortal souls). My belly is full of the souls of your fellow mortals, Dovahkiin. Die now and await your fate in Sovngarde!" -Alduin <br> </p1>
    <p2> You the character. Your personal `enter code here`identity, which is shaped by how you interact with the world `enter code here`around you. </p2>
  </details>

结果如何

Answer 1

您需要在代码中正确设置 CSS 样式才能显示“margin-left”声明值。 使用“.details”选择器而不是“details”，并在 HTML 元素中添加类属性。检查代码

.p1 {
  margin-left: 50px;
  text-align: center;
  color: silver;
  font-size: 100%;
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  margin-left: 50px;
  text-align: left;
  color: silver;
  font-size: 100%;
  font-family: "Times New Roman", Times, serif;
}

.details,
.summary {
  margin-left: 50px;
  color: silver;
  font-size: 110%;
  font-family: "Times New Roman", Times, serif;
}

<main>
  <p>
    Below are some of the most improtant, or amusing, characters in the Skyrim game. A brief description of the charcter and a quote they made or one referenceing them is also mporvided under their name. They are arranged in alphabetical order, not in order
    of significance. Some information is omitted to prevent spoiling important events in the game or because the information changes depending on the choices that you make.
  </p><br />

  <details class="details">
    <summary class="summary"> Alduin </summary>
    <p class="p1"> "Bahloki nahkip sillesejoor (My hunger will be fed by mortal souls). My belly is full of the souls of your fellow mortals, Dovahkiin. Die now and await your fate in Sovngarde!" -Alduin <br> /</p>
    <p class="p2"> You the character. Your personal `enter code here`identity, which is shaped by how you interact with the world `enter code here`around you. </p>
  </details>
</main>