Is it possible to indent the details information as it shows under the summary tag? Currently the information is left-aligned with both tags.

    <details> Details 1
     <summary> Summary 1 </summary> 
    </details>
    
    <details>
     <summary> Summary 2 </summary> 
     Details 2
    </details>
    
    <details> Details 3
     <summary> Summary 3 </summary> 
    </details>

I have tried text-indent, but it indents the summary information and NOT the details.

CodePudding user response：

A negative margin seems to work pretty well.

details {
  margin-left: 2em;
}

summary {
  margin-left: -2em;
}

<details> Details 1
 <summary> Summary 1 </summary> 
</details>

<details>
 <summary> Summary 2 </summary> 
 Details 2
</details>

<details> Details 3
 <summary> Summary 3 </summary> 
</details>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

With margin or padding you can style it. Example with padding:

details > summary {
  background-color: #888;
  cursor: pointer;
  padding: .5rem 1rem;
}

details > summary > * {
  display: inline;
}

details > div {
  border: 2px solid #888;
  margin-top: 0;
  padding: 35px;
}

  <details> 
    <div>Details  1 </div>
     <summary> Summary 1 </summary> 
  </details>
    
    <details>      
     <summary> Summary 2 </summary> 
     <div>Details  2 </div>
    </details>
    
    <details> 
     <summary> Summary 3 </summary> 
      <div>Details  3 </div>
    </details>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>