详细信息标签文本不响应CSS边距

Question

无论我尝试如何添加details标记的文本，都不尊重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元素中添加class属性。检查代码

.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>