Search code examples
htmlcssmarginhtml-tag-details

Details tag text doesn't respond to css margin


Not matter what I try and add the text of the details tag won't respect the margin-left style.

Some of the html text that isn't working

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>

How it comes out

enter image description here


Solution

  • you need to properly set the CSS styles in your code in order to display the 'margin-left' declaration values. Use the '.details' selector instead of 'details' and add the class attribute inside in the HTML elements. Check the code

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