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

I'm trying to add left & right padding to the details text when the details block is open, without the padding the text runs right up to the edge of the background and looks crowded. However, when adding the left & right padding, the summary section shrinks on both sides by that amount.

I tried adding border-box sizing to the details, which did help with the element not expanding beyond 100% width when open, but I can't figure out how to keep the summary bar at 100% width too.

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 >
    <summary >
      <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>

CodePudding user response：

A quick solution would be wrapping the details text (those p elements) into a div element and apply the padding for that new div instead of the details element.

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 >
    <summary >
      <h4>Question_1</h4>
    </summary>
    <div >
      <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>

CodePudding user response：

Do you need this ?

Left and right margin to only p tags

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

Delete paddings in 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;
}

Add padding in section

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 >
        <summary >
          <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>