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

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>