How to select and layout the contents of <details> without selecting <summary> using only CSS

Question

I'm trying to add 10px padding to the Story box using CSS, without adding any new extra HTML elements to the website code.

Is there any way to add the padding to the Story box, without adding a new extra HTML element?

In other words: How to select ONLY the Story box using only CSS, without selecting the <summary> part with it? (I like the current layout of the <summary> I don't want to change anything there.)

details {
  overflow: hidden;
  padding: 0px;
  outline: 1px solid black
}

summary {
  cursor: pointer;
  display: block;
  padding: 10px;
  user-select: none
}

<details>
  <summary>Our Next Holiday Options</summary>


  Story Story Story Story Story Story Story Story Story tory Story Story Story Story Story Story Story Story ory Story Story Story Story Story Story Story Story ry Story Story Story Story Story Story Story Story y Story Story Story Story Story Story Story
  Story Story Story Story Story Story Story Story Story


</details>

Answer 1

You can apply padding to the whole element and you consider negative margin on summary to disable it.

Example with 20px so we can better see:

details {
  overflow: hidden;
  padding: 20px; /* the padding here */
  outline: 1px solid black
}

summary {
  cursor: pointer;
  display: block;
  padding: 10px;
  margin:-20px; /* negative margin here */
  user-select: none
}
details[open] summary {
  margin-bottom:20px; /* the bottom the same as padding*/
}

<details>
  <summary>Our Next Holiday Options</summary>


  Story Story Story Story Story Story Story Story Story tory Story Story Story Story Story Story Story Story ory Story Story Story Story Story Story Story Story ry Story Story Story Story Story Story Story Story y Story Story Story Story Story Story Story
  Story Story Story Story Story Story Story Story Story


</details>

Answer 2

When you click on the summary element the details element has an attribute added - "open". You can use css to target attributes using square brackets - [open]. I have added css to add padding to the details element while removing it from summary when the attribute is present.

details {
  overflow: hidden;
  padding: 0px;
  outline: 1px solid black
}

summary {
  cursor: pointer;
  display: block;
  padding: 10px;
  user-select: none
}

details[open] {
  padding: 10px;
}

details[open] summary {
  padding: 0 0 10px;
}

<details>
  <summary>Our Next Holiday Options</summary>


  Story Story Story Story Story Story Story Story Story tory Story Story Story Story Story Story Story Story ory Story Story Story Story Story Story Story Story ry Story Story Story Story Story Story Story Story y Story Story Story Story Story Story Story
  Story Story Story Story Story Story Story Story Story


</details>