如何选择和布局<details>的内容，而不选择<summary>，只使用CSS。

Question

我想用CSS给故事框增加10px的padding。橆 在网站代码中添加任何新的额外的HTML元素。

有什么方法可以在不增加新的HTML元素的情况下，为故事框添加填充物？

换句话说:如何只用CSS来选择故事框，而不需要在故事框中选择 <summary> (我喜欢现在的版面设计。) <summary> 我不想改变任何东西）。)

谢谢你！我想用CSS给故事框添加10px的填充，而不需要在网站代码中添加任何额外的HTML元素。

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

你可以将padding应用到整个元素中，并且你可以考虑在摘要上使用负边距来禁用它。

例如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元素时，细节元素添加了一个属性--"open"。你可以使用css使用方括号来锁定属性--"open"。[open]. 我已经添加了css来添加padding到details元素，同时当属性存在时，从摘要中删除它。

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>