margin-block、margin-inline系統の評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)
目次
1.margin-block、margin-inline系統とは?
margin-block、margin-inline系統のプロパティはmargin-topまたはmargin-bottomプロパティ、margin-leftまたはmargin-rightプロパティの働きを要素の書字方向に応じて指定します。
writing-mode、direction、text-orientationプロパティで指定した値によって、その対応が決定されるプロパティです。
値の指定方法は以下の通りです。
{ margin-block-start: 値; }
{ margin-block-end: 値; }
{ margin-inline-start: 値; }
{ margin-inline-start: 値; }
値の指定方法
marginプロパティ、個別指定の各プロパティと同じです。
2.margin-block、margin-inline系統の使い方
それではmargin-block、margin-inline系統の使い方をみていきましょう。
.box {
background-color: yellow;
width: 200px;
height: 200px;
}
.text {
writing-mode: vertical-lr;
margin-block-start: 20px;
background-color: red;
}
他にも値を設定できるのでいろいろと試してみることをお勧めします!