CSS3

：

プロパティ

：

margin-block-start、margin-block-end、margin-inline-start、margin-inline-end

　 編集：2022.07.17 by T.A.

→●、mdn（margin-block-start、margin-block-end、margin-inline-start、margin-inline-end）

フロー相対なマージン。

名前 margin-block-start、
margin-block-end、
margin-inline-start、
margin-inline-end
値 <'margin-top'>
初期値 0
適用対象 margin-top と同じ
継承 されない
百分率 対応する物理プロパティに対するときと同じ
算出値 対応する margin-＊ プロパティと同じ
正準的順序 文法に従う
アニメーション型 算出値の型による

これらの各プロパティは［margin-top／margin-bottom／margin-left／margin-right］プロパティに対応する。その対応付けは、要素の［writing-mode、direction、text-orientation］に依存する。 

<DIV style="border:1px solid black; width:150px;">
 <SPAN style="border:1px solid red;
  margin-block-start:10px;
  margin-block-end:20px;
 ">内容</SPAN><BR>
 始<SPAN style="border:1px solid red;
  margin-inline-start:10px;
  margin-inline-end:20px;
 ">内容</SPAN>終
</DIV>
¶inline要素にはmargin-block-start、margin-block-endは効かない 
<DIV style="border:1px solid black; width:150px;">
 <DIV style="border:1px solid red;
  margin-block-start:10px;
  margin-block-end:20px;
 ">内容</DIV>
 <DIV style="border:1px solid red;
  margin-inline-start:10px;
  margin-inline-end:20px;
 ">内容</DIV>
</DIV>
テスト
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：