2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

[CSS] margin-block、margin-inline系統のプロパティで書字方向に応じてボックスのマージン幅を指定しよう!

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;
}

他にも値を設定できるのでいろいろと試してみることをお勧めします!




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です