<details>
      <summary>I am the default style</summary>
      <p>
        My marker is inside the bounding box with <code>summary</code> because
        of the property: <code>list-style-position: inside</code>.
      </p>
    </details>
    <details class="spacing">
      <summary>I have extra space</summary>
      <p>
        My marker is outside the bounding box of <code>summary</code> because of
        the property: <code>list-style-position: outside</code>, and there is
        extra space between us.
      </p>
    </details>

body{
  height: 100dvh;
  display: grid;
  place-items:center;
  grid-template-rows: repeat(2,min-content);
}

.spacing summary {
  list-style-position: outside;
  padding-inline-start: 1rem;
}

/* base styles */
* {
  box-sizing: border-box;
  margin: 0;
}

html {
  color-scheme: dark light;
}

body {
  width: 100%;
  height: 100dvh;

  font-family: system-ui, sans-serif;
  font-size: 1.2rem;

  margin: 4rem;
}

details {
  width: 20rem;
  margin-block-end: 2rem;
}

summary {
  cursor: pointer;
}