CSS3

：

プロパティ

：

margin-block、margin-inline

　編集：2022.07.17 by T.A.

フロー相対なマージン：略式プロパティ。

名前	`margin-block`、 `margin-inline`
値	<'margin-top'>{1,2}
初期値	個々のプロパティを見よ
適用対象	個々のプロパティを見よ
継承	個々のプロパティを見よ
百分率	個々のプロパティを見よ
算出値	個々のプロパティを見よ
正準的順序	文法に従う
アニメーション型	個々のプロパティを見よ

これら 2 つの略式プロパティは、順に、［margin-block-start、margin-block-end］、［margin-inline-start、margin-inline-end］を設定する。2 個の値は、順に［始端、終端］辺のスタイルを表現する。値が 1 個だけ与えられた場合、それが 2 個目の値にも利用される。

<DIV style="border:1px solid black; width:150px;">
 <SPAN style="border:1px solid red;
  margin-block:10px 20px;">内容
 </SPAN><BR>
 始<SPAN style="border:1px solid red;
  margin-inline:10px 20px;">内容
 </SPAN>終
</DIV>

<DIV style="border:1px solid black; width:150px;">
 <DIV style="border:1px solid red;
  margin-block:10px 20px;">内容
 </DIV>
 <DIV style="border:1px solid red;
  margin-inline:10px 20px;">内容
 </DIV>
</DIV>

テスト

ここに表示

スクリプト：

スクリプト：

表示内容：