CSS3

：

プロパティ

：

gap

　 編集：2022.07.05 by T.A.

→●、mdn

gap（側溝）： 略式プロパティ。

名前 gap
値 <'row-gap'> <'column-gap'>?
初期値 個々のプロパティを見よ。
適用対象 複 column コンテナ、flex コンテナ、格子コンテナ
継承 されない
百分率 内容区画の対応する寸法を基準にする
算出値 個々のプロパティを見よ。
正準的順序 文法に従う
アニメーション型 算出値の型による

このプロパティは、［row-gap、column-gap］を 1 個の宣言で設定する略式プロパティである。<'column-gap'> が省略された場合、<'row-gap'> と同じ値が設定される。

¶省略→●

<DIV style="border:1px solid red; width:150px; font-size:10pt;
 column-count:3;
 gap:normal 20px;
">あああああああああ</DIV>


<DIV style="border:1px solid red; width:150px; height:150px; font-size:20px;
 display:flex; flex-wrap:wrap;
 gap:5px 10px;
">
 <DIV style="flex-basis:50px; border:1px solid black;">1</DIV>
 <DIV style="flex-basis:50px; border:1px solid black;">2</DIV>
 <DIV style="flex-basis:50px; border:1px solid black;">3</DIV>
</DIV>


<DIV style="border:1px solid red; width:150px; height:150px; font-size:20px;
 display:grid;
 grid-template:'a b' 'c d';
 gap:5px 10px;
">
 <DIV style="border:1px solid black;">1</DIV>
 <DIV style="border:1px solid black;">2</DIV>
 <DIV style="border:1px solid black;">3</DIV>
</DIV>

テスト
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：