在不减小 <summary> 宽度的情况下向 <details> 添加填充

Question

我正在尝试在详细信息块打开时向详细信息文本添加左右填充，如果没有填充，文本会一直延伸到背景边缘并且看起来很拥挤。但是，当添加左右填充时，摘要部分会在两侧缩小该数量。

我尝试在细节中添加边框大小调整，这确实有助于元素在打开时不会扩展超过 100% 宽度，但我也不知道如何将摘要栏保持在 100% 宽度。

summary.accordion-button {
  display: revert;
}

details.accordion-button {
  width: 100%;
  margin-bottom: 1rem;
  padding-bottom: 0.2rem;
  border-radius: var(--buttons-radius);
  padding-left: 1em;
  padding-right: 1em;
  box-sizing: border-box;
}

summary.accordion-button > * {
  display: inline;
}

summary.accordion-button:not([open]) {
  text-indent: 0.5em;
  list-style: revert;
  padding: 0.5rem;
  background-color: transparent;
  border-radius: var(--buttons-radius);
  border: var(--buttons-border-width) solid
    rgb(var(--color-base-outline-button-labels));
  box-shadow: var(--buttons-shadow-horizontal-offset)
    var(--buttons-shadow-vertical-offset) var(--buttons-shadow-blur-radius)
    rgba(var(--color-shadow), var(--buttons-shadow-opacity));
}

details.accordion-button:not([open]):hover summary {
  background: rgb(var(--color-base-text));
  color: rgb(var(--color-base-solid-button-labels)); /* marker */
  box-shadow: var(--buttons-shadow-horizontal-offset)
    var(--buttons-shadow-vertical-offset)
    calc(var(--buttons-shadow-blur-radius) * 1.2)
    rgba(var(--color-base-accent-1), calc(var(--buttons-shadow-opacity) * 1.25));
}

details.accordion-button:not([open]):hover h4 {
  color: rgb(var(--color-base-solid-button-labels));
  font-size: 1.2em;
  letter-spacing: 0.1em;
}

details.accordion-button[open] {
  background: rgba(var(--color-base-text), 0.15);
  box-shadow: var(--buttons-shadow-horizontal-offset)
    var(--buttons-shadow-vertical-offset) var(--buttons-shadow-blur-radius)
    rgba(var(--color-shadow), var(--buttons-shadow-opacity));
}

details.accordion-button[open] h4 {
  color: rgb(var(--color-base-solid-button-labels));
  font-size: 1.2em;
  letter-spacing: 0.1em;
}

details.accordion-button[open] summary {
  border-radius: var(--buttons-radius) var(--buttons-radius) 0 0;
  background: rgb(var(--color-base-text));
  border: none;
  letter-spacing: 0.1em;
  color: rgb(var(--color-base-solid-button-labels));
  box-shadow: none;
}

.accordion-button summary::-webkit-details-marker,
.accordion-button summary::marker {
  display: revert;
}

details.accordion-button::-webkit-details-marker:hover,
details summary[open].accordion-button::marker:hover {
  color: rgb(var(--color-base-solid-button-labels));
}

/* variables */
:root {
  --buttons-radius: 8px;
  --buttons-border-width: 2px;
  --buttons-border-opacity: 1;
  --buttons-shadow-horizontal-offset: 0px;
  --buttons-shadow-vertical-offset: 0px;
  --buttons-shadow-blur-radius: 0px;
  --color-base-text: 68, 34, 115;
  --color-base-outline-button-labels: 68, 34, 155;
  --color-base-solid-button-labels: 255, 255, 255;
}


/*-------- v2 oddities */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}


/*-------- v3 oddities */

summary {
  cursor: pointer;
  list-style: none;
  position: relative;
}

summary .icon-caret {
  position: absolute;
  height: 0.6rem;
  right: 1.5rem;
  top: calc(50% - 0.2rem);
}

summary::-webkit-details-marker {
  display: none;
}

body,
h1,
h2,
h3,
h4,
h5 {
  font-family: sans-serif;
  color: #442273;
}

<section>
  <h3>Section_Header</h3>
  <details class="accordion-button">
    <summary class="accordion-button">
      <h4>Question_1</h4>
    </summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vestibulum morbi blandit cursus risus. Malesuada fames ac turpis egestas integer eget. Curabitur gravida arcu ac tortor dignissim
      convallis aenean et tortor. Varius vel pharetra vel turpis nunc eget. Velit scelerisque in dictum non consectetur a erat. Eget duis at tellus at urna. Porttitor eget dolor morbi non arcu risus quis. Gravida arcu ac tortor dignissim convallis. Mauris
      cursus mattis molestie a iaculis. Laoreet non curabitur gravida arcu. Nunc non blandit massa enim nec dui nunc mattis enim. Egestas quis ipsum suspendisse ultrices gravida. Sit amet purus gravida quis blandit turpis. Mauris vitae ultricies leo integer
      malesuada nunc vel risus. Risus viverra adipiscing at in. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc. Non quam lacus suspendisse faucibus interdum. Sed sed risus pretium quam vulputate dignissim suspendisse in. Sit amet
      consectetur adipiscing elit pellentesque habitant.</p>
    <p>Malesuada fames ac turpis egestas sed. Auctor augue mauris augue neque gravida in fermentum et. Risus sed vulputate odio ut enim blandit volutpat maecenas. Interdum consectetur libero id faucibus. Orci ac auctor augue mauris augue neque gravida in.
      Sagittis vitae et leo duis ut diam quam nulla. Odio pellentesque diam volutpat commodo sed. In fermentum et sollicitudin ac orci. Sed vulputate odio ut enim blandit volutpat maecenas volutpat blandit. Mi quis hendrerit dolor magna eget est lorem
      ipsum. Volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Tellus in hac habitasse platea. Vestibulum mattis ullamcorper velit sed ullamcorper morbi. Aliquam eleifend mi in nulla posuere. Diam sollicitudin tempor id eu
      nisl nunc. Velit laoreet id donec ultrices tincidunt arcu non sodales neque. Aliquet eget sit amet tellus cras adipiscing enim eu turpis. Hac habitasse platea dictumst vestibulum rhoncus. Eu sem integer vitae justo eget magna fermentum iaculis eu.</p>
  </details>
</section>

Answer 1

一个快速的解决方案是将详细信息文本（那些 p 元素）包装到 div 元素中，并为新的 div 应用填充，而不是 details元素。

summary.accordion-button {
  display: revert;
}

details.accordion-button {
  width: 100%;
  margin-bottom: 1rem;
  border-radius: var(--buttons-radius);
  // padding-bottom: 0.2rem; /** no longer needed here */
  // padding-left: 1em; /** no longer needed here */
  // padding-right: 1em; /** no longer needed here */
  box-sizing: border-box;
}


/** apply the padding for the "wrapper" div */

.wrapper {
  padding: 1em;
}


/** remove margins on the "p" elements */

.wrapper>p {
  margin: 0
}


/** only have a bottom margin to visually separate the text that doesn't apply to the last "p" element so that it doesn't ruin the padding on ".wrapper" div */

.wrapper>p:not(:last-child) {
  margin-bottom: 1em;
}

summary.accordion-button>* {
  display: inline;
}

summary.accordion-button:not([open]) {
  text-indent: 0.5em;
  list-style: revert;
  padding: 0.5rem;
  background-color: transparent;
  border-radius: var(--buttons-radius);
  border: var(--buttons-border-width) solid rgb(var(--color-base-outline-button-labels));
  box-shadow: var(--buttons-shadow-horizontal-offset) var(--buttons-shadow-vertical-offset) var(--buttons-shadow-blur-radius) rgba(var(--color-shadow), var(--buttons-shadow-opacity));
}

details.accordion-button:not([open]):hover summary {
  background: rgb(var(--color-base-text));
  color: rgb(var(--color-base-solid-button-labels));
  /* marker */
  box-shadow: var(--buttons-shadow-horizontal-offset) var(--buttons-shadow-vertical-offset) calc(var(--buttons-shadow-blur-radius) * 1.2) rgba(var(--color-base-accent-1), calc(var(--buttons-shadow-opacity) * 1.25));
}

details.accordion-button:not([open]):hover h4 {
  color: rgb(var(--color-base-solid-button-labels));
  font-size: 1.2em;
  letter-spacing: 0.1em;
}

details.accordion-button[open] {
  background: rgba(var(--color-base-text), 0.15);
  box-shadow: var(--buttons-shadow-horizontal-offset) var(--buttons-shadow-vertical-offset) var(--buttons-shadow-blur-radius) rgba(var(--color-shadow), var(--buttons-shadow-opacity));
}

details.accordion-button[open] h4 {
  color: rgb(var(--color-base-solid-button-labels));
  font-size: 1.2em;
  letter-spacing: 0.1em;
}

details.accordion-button[open] summary {
  border-radius: var(--buttons-radius) var(--buttons-radius) 0 0;
  background: rgb(var(--color-base-text));
  border: none;
  letter-spacing: 0.1em;
  color: rgb(var(--color-base-solid-button-labels));
  box-shadow: none;
}

.accordion-button summary::-webkit-details-marker,
.accordion-button summary::marker {
  display: revert;
}

details.accordion-button::-webkit-details-marker:hover,
details summary[open].accordion-button::marker:hover {
  color: rgb(var(--color-base-solid-button-labels));
}


/* variables */

:root {
  --buttons-radius: 8px;
  --buttons-border-width: 2px;
  --buttons-border-opacity: 1;
  --buttons-shadow-horizontal-offset: 0px;
  --buttons-shadow-vertical-offset: 0px;
  --buttons-shadow-blur-radius: 0px;
  --color-base-text: 68, 34, 115;
  --color-base-outline-button-labels: 68, 34, 155;
  --color-base-solid-button-labels: 255, 255, 255;
}


/*-------- v2 oddities */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}


/*-------- v3 oddities */

summary {
  cursor: pointer;
  list-style: none;
  position: relative;
}

summary .icon-caret {
  position: absolute;
  height: 0.6rem;
  right: 1.5rem;
  top: calc(50% - 0.2rem);
}

summary::-webkit-details-marker {
  display: none;
}

body,
h1,
h2,
h3,
h4,
h5 {
  font-family: sans-serif;
  color: #442273;
}

<section>
  <h3>Section_Header</h3>
  <details class="accordion-button">
    <summary class="accordion-button">
      <h4>Question_1</h4>
    </summary>
    <div class="wrapper">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vestibulum morbi blandit cursus risus. Malesuada fames ac turpis egestas integer eget. Curabitur gravida arcu ac tortor dignissim
        convallis aenean et tortor. Varius vel pharetra vel turpis nunc eget. Velit scelerisque in dictum non consectetur a erat. Eget duis at tellus at urna. Porttitor eget dolor morbi non arcu risus quis. Gravida arcu ac tortor dignissim convallis.
        Mauris cursus mattis molestie a iaculis. Laoreet non curabitur gravida arcu. Nunc non blandit massa enim nec dui nunc mattis enim. Egestas quis ipsum suspendisse ultrices gravida. Sit amet purus gravida quis blandit turpis. Mauris vitae ultricies
        leo integer malesuada nunc vel risus. Risus viverra adipiscing at in. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc. Non quam lacus suspendisse faucibus interdum. Sed sed risus pretium quam vulputate dignissim suspendisse
        in. Sit amet consectetur adipiscing elit pellentesque habitant.</p>
      <p>Malesuada fames ac turpis egestas sed. Auctor augue mauris augue neque gravida in fermentum et. Risus sed vulputate odio ut enim blandit volutpat maecenas. Interdum consectetur libero id faucibus. Orci ac auctor augue mauris augue neque gravida
        in. Sagittis vitae et leo duis ut diam quam nulla. Odio pellentesque diam volutpat commodo sed. In fermentum et sollicitudin ac orci. Sed vulputate odio ut enim blandit volutpat maecenas volutpat blandit. Mi quis hendrerit dolor magna eget est
        lorem ipsum. Volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Tellus in hac habitasse platea. Vestibulum mattis ullamcorper velit sed ullamcorper morbi. Aliquam eleifend mi in nulla posuere. Diam sollicitudin tempor
        id eu nisl nunc. Velit laoreet id donec ultrices tincidunt arcu non sodales neque. Aliquet eget sit amet tellus cras adipiscing enim eu turpis. Hac habitasse platea dictumst vestibulum rhoncus. Eu sem integer vitae justo eget magna fermentum iaculis
        eu.
      </p>
    </div>
  </details>
</section>

Answer 2

你需要这个吗？

只有 p 个标签的左右边距

.accordion-button p {
  padding: 0 5rem;
}

删除 details.accordion-button

中的填充

details.accordion-button {
  width: 100%;
  margin-bottom: 1rem;
  padding-bottom: 0.2rem;
  border-radius: var(--buttons-radius);
  /* padding-left: 1em;
  padding-right: 1em; */
  box-sizing: border-box;
}

在部分中添加填充

section{
  padding: 1rem;
}

summary.accordion-button {
  display: revert;
}

details.accordion-button {
  width: 100%;
  margin-bottom: 1rem;
  padding-bottom: 0.2rem;
  border-radius: var(--buttons-radius);
  /* padding-left: 1em;
  padding-right: 1em; */
  box-sizing: border-box;
}

summary.accordion-button > * {
  display: inline;
}

summary.accordion-button:not([open]) {
  text-indent: 0.5em;
  list-style: revert;
  padding: 0.5rem;
  background-color: transparent;
  border-radius: var(--buttons-radius);
  border: var(--buttons-border-width) solid
    rgb(var(--color-base-outline-button-labels));
  box-shadow: var(--buttons-shadow-horizontal-offset)
    var(--buttons-shadow-vertical-offset) var(--buttons-shadow-blur-radius)
    rgba(var(--color-shadow), var(--buttons-shadow-opacity));
}

details.accordion-button:not([open]):hover summary {
  background: rgb(var(--color-base-text));
  color: rgb(var(--color-base-solid-button-labels)); /* marker */
  box-shadow: var(--buttons-shadow-horizontal-offset)
    var(--buttons-shadow-vertical-offset)
    calc(var(--buttons-shadow-blur-radius) * 1.2)
    rgba(var(--color-base-accent-1), calc(var(--buttons-shadow-opacity) * 1.25));
}

details.accordion-button:not([open]):hover h4 {
  color: rgb(var(--color-base-solid-button-labels));
  font-size: 1.2em;
  letter-spacing: 0.1em;
}

details.accordion-button[open] {
  background: rgba(var(--color-base-text), 0.15);
  box-shadow: var(--buttons-shadow-horizontal-offset)
    var(--buttons-shadow-vertical-offset) var(--buttons-shadow-blur-radius)
    rgba(var(--color-shadow), var(--buttons-shadow-opacity));
}

details.accordion-button[open] h4 {
  color: rgb(var(--color-base-solid-button-labels));
  font-size: 1.2em;
  letter-spacing: 0.1em;
}

details.accordion-button[open] summary {
  border-radius: var(--buttons-radius) var(--buttons-radius) 0 0;
  background: rgb(var(--color-base-text));
  border: none;
  letter-spacing: 0.1em;
  color: rgb(var(--color-base-solid-button-labels));
  box-shadow: none;
}

.accordion-button summary::-webkit-details-marker,
.accordion-button summary::marker {
  display: revert;
}

details.accordion-button::-webkit-details-marker:hover,
details summary[open].accordion-button::marker:hover {
  color: rgb(var(--color-base-solid-button-labels));
}

/* variables */
:root {
  --buttons-radius: 8px;
  --buttons-border-width: 2px;
  --buttons-border-opacity: 1;
  --buttons-shadow-horizontal-offset: 0px;
  --buttons-shadow-vertical-offset: 0px;
  --buttons-shadow-blur-radius: 0px;
  --color-base-text: 68, 34, 115;
  --color-base-outline-button-labels: 68, 34, 155;
  --color-base-solid-button-labels: 255, 255, 255;
}


/*-------- v2 oddities */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}


/*-------- v3 oddities */

summary {
  cursor: pointer;
  list-style: none;
  position: relative;
}

summary .icon-caret {
  position: absolute;
  height: 0.6rem;
  right: 1.5rem;
  top: calc(50% - 0.2rem);
}

summary::-webkit-details-marker {
  display: none;
}

body,
h1,
h2,
h3,
h4,
h5 {
  font-family: sans-serif;
  color: #442273;
}

.accordion-button p {
  padding: 0 5rem;
}

section{
  padding: 1rem;
}

 <section>
      <h3>Section_Header</h3>
      <details class="accordion-button">
        <summary class="accordion-button">
          <h4>Question_1</h4>
        </summary>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Vestibulum
          morbi blandit cursus risus. Malesuada fames ac turpis egestas integer
          eget. Curabitur gravida arcu ac tortor dignissim convallis aenean et
          tortor. Varius vel pharetra vel turpis nunc eget. Velit scelerisque in
          dictum non consectetur a erat. Eget duis at tellus at urna. Porttitor
          eget dolor morbi non arcu risus quis. Gravida arcu ac tortor dignissim
          convallis. Mauris cursus mattis molestie a iaculis. Laoreet non
          curabitur gravida arcu. Nunc non blandit massa enim nec dui nunc
          mattis enim. Egestas quis ipsum suspendisse ultrices gravida. Sit amet
          purus gravida quis blandit turpis. Mauris vitae ultricies leo integer
          malesuada nunc vel risus. Risus viverra adipiscing at in. Dictumst
          quisque sagittis purus sit amet volutpat consequat mauris nunc. Non
          quam lacus suspendisse faucibus interdum. Sed sed risus pretium quam
          vulputate dignissim suspendisse in. Sit amet consectetur adipiscing
          elit pellentesque habitant.
        </p>
        <p>
          Malesuada fames ac turpis egestas sed. Auctor augue mauris augue neque
          gravida in fermentum et. Risus sed vulputate odio ut enim blandit
          volutpat maecenas. Interdum consectetur libero id faucibus. Orci ac
          auctor augue mauris augue neque gravida in. Sagittis vitae et leo duis
          ut diam quam nulla. Odio pellentesque diam volutpat commodo sed. In
          fermentum et sollicitudin ac orci. Sed vulputate odio ut enim blandit
          volutpat maecenas volutpat blandit. Mi quis hendrerit dolor magna eget
          est lorem ipsum. Volutpat commodo sed egestas egestas fringilla
          phasellus faucibus scelerisque. Tellus in hac habitasse platea.
          Vestibulum mattis ullamcorper velit sed ullamcorper morbi. Aliquam
          eleifend mi in nulla posuere. Diam sollicitudin tempor id eu nisl
          nunc. Velit laoreet id donec ultrices tincidunt arcu non sodales
          neque. Aliquet eget sit amet tellus cras adipiscing enim eu turpis.
          Hac habitasse platea dictumst vestibulum rhoncus. Eu sem integer vitae
          justo eget magna fermentum iaculis eu.
        </p>
      </details>
    </section>

在不减小 <summary> 宽度的情况下向 <details> 添加填充

Add padding to <details> without decreasing width of <summary>

css

padding

details-tag

summary-tag