CSS3

プロパティ

row-gap

→●、mdn

段組カラム間、ボックスのアイテム間、の隙間（ギャップ）。

これらのプロパティは、コンテナ内の各アイテム間に空間を追加する、固定長さの 側溝（gutter）を指定する ─ 内容分布プロパティの space-between キーワードに類似な方式で、ただし残りの空間に対する割合分としてではなく、固定サイズにより。
row-gap プロパティは、コンテナのブロック軸において各ボックスを分離するような、各“row”間のアキを指定する。

normal ⤴

使用値は 0px になる。

<DIV style="border:1px solid red; width:200px; height:100px;
 column-count:2;
 row-gap:normal;
 font-size:16px; line-height:1;
">あああああああああ<BR>いいいい<BR>ううう<BR>えええ
</DIV>

あああああああああ
いいいい
ううう
えええ

<DIV style="border:1px solid red; width:200px; height:100px;
 display:flex;
 align-content:start;
 flex-wrap:wrap;
 row-gap:normal;
 font-size:16px;
">
 <DIV style="flex-basis:50px; border:1px solid #0008;">１</DIV>
 <DIV style="flex-basis:50px; border:1px solid #0008;">２</DIV>
 <DIV style="flex-basis:50px; border:1px solid #0008;">３</DIV>
 <DIV style="flex-basis:50px; border:1px solid #0008;">４</DIV>
</DIV>

１

２

３

４

<DIV style="border:1px solid red; width:250px; height:150px;
 display:grid;
 align-content:start;
 grid-template:50px 70px/50px 70px 100px;
 row-gap:normal;
">
 <DIV style="border:1px solid #0008;">１</DIV>
 <DIV style="border:1px solid #0008;">２</DIV>
 <DIV style="border:1px solid #0008;">３</DIV>
 <DIV style="border:1px solid #0008;">４</DIV>
</DIV>

１

２

３

４

<length-percentage> ○ ⤴

“row”間の gap を指定する。¶段組には効果は無い…意味が無いようだ。

負な値は無効。

百分率については、§ gap プロパティにおける百分率 を見よ。

<DIV style="border:1px solid black; width:200px; height:100px;
 column-count:2;
 font-size:16px; line-height:1;
">あああああああああ<BR>いいいい
 <DIV style="border:1px solid black;">ううう</DIV>
 <DIV style="border:1px solid black;">えええ</DIV>
</DIV>

あああああああああ
いいいい

ううう

えええ

¶

<DIV style="border:1px solid red; width:200px; height:100px;
 column-count:2;
 row-gap:20px;
 font-size:16px; line-height:1;
">あああああああああ<BR>いいいい
 <DIV style="border:1px solid black;">ううう</DIV>
 <DIV style="border:1px solid black;">えええ</DIV>
</DIV>

あああああああああ
いいいい

ううう

えええ

¶

<DIV style="border:1px solid red; width:200px; height:100px;
 display:flex;
 align-content:start;
 flex-wrap:wrap;
 row-gap:10px;
">
 <DIV style="flex-basis:50px; border:1px solid #0008;">１</DIV>
 <DIV style="flex-basis:50px; border:1px solid #0008;">２</DIV>
 <DIV style="flex-basis:50px; border:1px solid #0008;">３</DIV>
 <DIV style="flex-basis:50px; border:1px solid #0008;">４</DIV>
</DIV>

１

２

３

４

<DIV style="border:1px solid red; width:200px; height:100px;
 display:flex;
 align-content:start;
 flex-wrap:wrap;
 row-gap:10%;
">
 <DIV style="flex-basis:50px; border:1px solid #0008;">１</DIV>
 <DIV style="flex-basis:50px; border:1px solid #0008;">２</DIV>
 <DIV style="flex-basis:50px; border:1px solid #0008;">３</DIV>
 <DIV style="flex-basis:50px; border:1px solid #0008;">４</DIV>
</DIV>

１

２

３

４

<DIV style="border:1px solid red; width:250px; height:150px;
 display:grid;
 align-content:start;
 grid-template:50px 70px/50px 70px 100px;
 row-gap:10px;
">
 <DIV style="border:1px solid #0008;">１</DIV>
 <DIV style="border:1px solid #0008;">２</DIV>
 <DIV style="border:1px solid #0008;">３</DIV>
 <DIV style="border:1px solid #0008;">４</DIV>
</DIV>

１

２

３

４

側溝による効果は各アイテム間の最小アキであり、［justify-content／align-content］によるアキも追加され得る。そのような追加の空間は、実質的に、側溝のサイズを増やす。

これらのプロパティの正確な取り扱いは、レイアウト コンテナに応じて変わる：

複 column コンテナ

row-gap は、現時点では適用されない。

flex コンテナ

主軸に適用されるときは（例：［flex-direction が row にされた flex コンテナ］における column-gap）、各アイテム間の最小アキを指示する（同じ flex 行において隣接する flex アイテムの合間に固定サイズのマージンが追加で挿入されるかのように）。

交叉軸に適用されるときは（例：［flex-direction が row にされた flex コンテナ］における row-gap）、隣接する flex 行の合間の最小アキを指示する。

格子コンテナ

［row-gap／column-gap］プロパティが格子コンテナに指定されたときは、各［格子 row／格子 column］間の側溝を定義する。精確な詳細は、[CSS-GRID] の § 各種 側溝プロパティ を見よ。

注記： table ボックスにおいては、 gap プロパティを利用しても、各 cell 間の分離を指定することはない。代わりに border-spacing プロパティを利用する： その機能性は少し異なり、継承されることに加え、最も外側の cell と table のボーダーとの合間にも追加のアキを指定する（space-between よりも space-evenly に類似する）。

テスト