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

Question

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

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

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