CSS margin-inline-end 属性

コース推薦：

margin-inline-end 定義と使用方法

属性と同様に、行内方向末端のマージンを指定します。 margin-inline および margin-block 属性はCSSの margin-top、margin-bottom、margin-left および margin-right 属性は非常に似ていますが、 margin-inline および margin-block 属性はブロック方向と行内方向に依存しています。

注意：関連するCSS属性 writing-mode および direction 行内方向を定義します。これは要素の始点と終点、および margin-inline-end 属性の結果。英語ページでは、ブロック方向は下方向、行内方向は左から右です。

インスタンス

例1

行内方向末端のマージンを設定：

div {
  margin-inline-end: 35px;
}

実際に試してみる

例2

次の<div>要素の writing-mode 属性値が 'vertical-rl' に設定されている場合、行内方向は下方向です。結果として、要素の末端は右側から下部に移動します：

div {
  margin-inline-end: 50px;
  writing-mode: vertical-rl;
}

実際に試してみる

例3

次の<div>要素の direction 属性値が 'rtl' に設定されている場合、行内方向は右から左です。結果として、要素の末端は右側から左側に移動します：

div {
  margin-inline-end: 50px;
  direction: rtl;
}

実際に試してみる

CSS 语法

margin-inline-end: auto|length|initial|inherit;

属性値

値 説明
auto デフォルト値。要素のデフォルトのmargin-inline-endの値。
length

px、pt、cmなどの単位でmargin-inline-endを指定します。負値も許可されます。

参照：CSS 単位。
% margin-inline-endは、行内方向上の親要素のサイズのパーセントで指定されます。
initial この属性をデフォルト値に設定します。参照 initial。
inherit この属性は親要素から継承されます。参照 inherit。

技術的な詳細

デフォルト値： auto
継承性： いいえ
アニメーション制作： サポート。参照：アニメーション関連属性。
バージョン： CSS3
JavaScript 语法： object.style.marginInlineEnd="50px"

ブラウザのサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

クローム エッジ ファイアフォックス サファリ オペラ
87.0 87.0 41.0 12.1 73.0

相关页面

参考：CSS direction 属性

参考：CSS margin-inline-start 属性

参考：CSS margin-bottom 属性

参考：CSS margin-inline 属性

参考：CSS margin-left 属性

参考：CSS margin-right 属性

参考：CSS margin-top 属性

参考：CSS writing-mode 属性