JSFiddle - React, Tailwind, and code Playground

HTML

<h3>段落上下スペースのオリジナル</h3>
<div class="main">
  <p>
    段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落
  </p>
  <p>
    段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落
  </p>
  <p>
    段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落
  </p>
</div>
<h3>本来適用しておきたいのは以下</h3>
<p>
  pのmarginはpに対する指定なので、pとそこに連接するpの間には指定したスペースの空きが欲しいが、#mainのpaddingは上下左右同じ量を開けたい。
  <br> 例えば、pの前に見出しがあった場合も考えるともっと良い。見出しにもおそらくスペースが開いているだろうから、pの前後にスペースを開けると見出しスペース+Pのスペースとなって思いがけぬスペースが開く。
</p>
<div class="main2">
  <p>
    段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落
  </p>
  <p>
    段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落
  </p>
  <p>
    段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落
  </p>
</div>
<h2>見出しを入れた場合の表示</h2>
<p>
見出しはその後に続く段落の件名みたいなものだから、見出し後の最初のpの間はあまりスペースを開けなくても良いはず。ここらはまとまりをどうデザインするかにもよる部分。
</p>
<div class="main">
  <h2>見出しを入れてみるテスト</h2>
  <p>
    段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落
  </p>
  <p>
    段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落
  </p>
  <p>
    段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落
  </p>
</div>
<div class="main2">
  <h2>見出しを入れてみるテスト</h2>
  <p>
    段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落
  </p>
  <p>
    段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落
  </p>
  <p>
    段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落
  </p>
</div>

<h2>同じ体裁が続く場合</h2>
<p>段落上下マージンでは、同じ体裁が続いた場合mainのpadding+最後のpのスペースでmainのボトムにムダなスペースができる</p>
<div class="main">
  <h2>見出しを入れてみるテスト</h2>
  <p>
    段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落
  </p>
  <p>
    段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落
  </p>
  <p>
    段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落
  </p>
  <h2>見出しを入れてみるテスト</h2>
  <p>
    段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落
  </p>
  <p>
    段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落
  </p>
  <p>
    段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落　段落
  </p>
</div>
<p>以下では、同じ体裁が続いてもmainのpaddingは維持できているという点に注目。<br>もし仮にmainがこのような1つのブロックのみ表示するものではなく、main自体が横並びになっていたり、カードのように縦にも並ぶ場合、ボトムのスペースがムダにあるとあまり美しく見えないのがポイント。<br>
スペースの都合上mainのpaddingが10pxだけれども、これが大きくなればなるほどにムダなスペースが目立つようになる。</p>
<div class="main2">
 ...

CSS

.main h2,
.main2 h2 {
  margin: 0;
  margin-bottom: 0.5em;
}

.main {
  padding: 10px;
  border: 1px solid #f99;
}

.main p {
  margin: 2em 0;
}

.main2 {
  padding: 10px;
  border: 1px solid #f99;
}

.main2 p {
  padding: 0;
  margin: 0;
  /*ブラウザデフォルトスタイルを含めリセット*/
  margin-bottom: 2em;
}

.main2 p:last-child {
  margin-bottom: 0;
}