概要
ブロック方向の先頭と末尾のマージンを設定できるCSSのmargin-blockプロパティと、インライン方向の先頭と末尾のマージンを設定できるmargin-inline プロパティを紹介。用途・要件
margin-block
は、論理的なブロックの先頭と末尾のマージンを設定できる。margin-inline
は、論理的なインライン方向の先頭と末尾のマージンを設定できる。- 要素の書字方向やテキストの向き(
writing-mode
,direction
,text-orientation
)に応じて物理的なマージンに変換される。
margin-block
とmargin-inline
は一括指定プロパティ。margin-block
は、margin-block-start
とmargin-block-end
を一括指定したもの。margin-inline
は、margin-inline-start
とmargin-inline-end
を一括指定したもの。
検証ブラウザ
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
- Microsoft Edge(最新)
注意事項
- IE11は非対応です。
実装
ローカル環境にコードを移設した際に動作しない場合はこちら。(トラブルシューティングページへ)