如何在<details>不使用<summary>仅使用 CSS 的情况下选择和布局内容

Question

我正在尝试使用CSS向Story框添加10px填充，而不在网站代码中添加任何新的额外HTML元素。

有没有什么方法可以在不添加额外HTML元素的情况下将填充添加到故事框中？

换句话说：如何只使用CSS选择故事框，而不使用它选择<summary>部分？(我喜欢<summary>的当前布局，我不想在那里做任何更改。(

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

您可以对整个元素应用填充，并考虑在摘要上使用负边距来禁用它。

20px的例子，这样我们可以更好地看到：

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

当您单击summary元素时，details元素添加了一个属性-"open"。您可以使用css来使用方括号-[open]来定位属性。我添加了css来添加细节元素的填充，同时在属性存在时将其从摘要中删除。

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>