css flexを使い縦に間隔をあけたい

Question

flexを使って<span>タグのなかのタグを縦に間隔をあけたいです。
横の間隔を空けるにはgridgapを使いますが、縦に間隔をあけたいときはなにを使えばようのでしょうか？

<div class="flex griddap-10">
  <p>おおおおおおおおおおお</p>
  <span>
    <p>ああああ</p>
　　 <p>いいいい</p>
    <p>うううう</p>
    <p>ええええ</p>
  </span>
</div>

//scss

div,
span {
  &.flex {
    display: flex;
  }
  &.gridgap-10 {
    grid-gap: 10px;
  }
}

Comments

[Lhankor_Mhy]

普通にマージンではダメなのですか？

[Daregada]

ええと、span要素の中にp要素は入れられません。

Answer 1

gap (grid-gap) - CSS: カスケーディングスタイルシート | MDN

grid-gap は今は gap に置き換えられてます。
gap は縦でも横でも間隔を空けられます。
row-gap column-gap の一括指定なので。

<div class="flex gap-10 ">
  <p>ああああ</p>
  <p>いいいい</p>
  <p>うううう</p>
  <p>ええええ</p>
</div>

div.flex {
  display: flex;
  flex-direction: column;
}
div.gap-10 {
  gap: 20px;
}

div > p {
  background-color: aqua;
  margin: 0;
}

あと、他の方からも指摘がありますが、span のなかに p は入れることはできません。

Comments

[dsfdsf]

回答ありがとうございます！！！
spanタグはdivタグと同じようなものと認識していたのですが違うんですね、、

Answer 2

marginやpaddingで上下に余白をつけられます。