CODEWITHSUNDEEP
csscss-selectors
jmrker
jmrker

Reputation: 508

Can I indent the details tag information that shows beneath a summary tag display?

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.

Upvotes: 3

Views: 1202

Answers (3)

Marcus
Marcus

Reputation: 3797

What worked for me was to give a left margin to everything in details except summary, as seen in the "added css rule" below, using the :not() CSS pseudoclass.

Unfortunately, it requires that you wrap your inner bits in some element tag, because a non-element text node cannot be matched. Here I used <div>.

/* added css rule */
details > :not(summary) {
   margin-left: 2em;
}
<details open> <div>Details 1</div>
 <summary> Summary 1 </summary> 
</details>

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

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

Upvotes: 1

KrassVerpeilt
KrassVerpeilt

Reputation: 445

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>

Upvotes: 1

recursive
recursive

Reputation: 86084

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>

Upvotes: 4

Related Questions