<div class="container">
  <details class="details">
    <summary class="summary">質問</summary>
    <div class="answer">
      <div class="answerInner">回答</div>
    </div>
  </details>
  <br>
    <details class="details">
    <summary class="summary">質問</summary>
    <div class="answer">
      <div class="answerInner">回答</div>
    </div>
  </details>
</div>

.container {
  background-color: lightblue;
  padding: 20px;
  min-height:100vh;

}
.details{
  background-color: white;
}
/* ここまで調整用スタイル */

.summary {
  display: block;
  cursor: pointer;
  font-weight: bold;
  padding: 20px;
}
.summary::-webkit-details-marker {
  /* Safari-デフォルトの三角形を削除*/
  display: none;
}
.answer {
  overflow: hidden;
  /* padding・marginはここでは設定しない */
}
.answerInner {
  padding: 0 20px 20px;
}