CSS margin-inline-start 属性

定義と用法

margin-inline-start 属性指定行内方向起始端的外边距。

CSS 的 属性は非常に似ていますが、 関連するCSS属性 margin-inline 属性はCSSの margin-topmargin-bottom、margin-bottommargin-left 関連するCSS属性 、 margin-right 属性は非常に似ていますが、 関連するCSS属性 margin-inline margin-block

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

例

例1

行内方向の開始端の外側マージンを設定します：

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

自分で試してみてください

例2

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

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

自分で試してみてください

例3

<div>要素の direction 属性値が 'rtl' に設定されている場合、行内方向は右から左です。結果として、要素の開始端は視覚的には元の左側から外側マージンが適用されますが、方向が右から左であるため、実際のレイアウト効果は異なります：

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

自分で試してみてください

CSS文法

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

属性値

技術的詳細

ブラウザのサポート

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

相关页面

参考：CSS direction 属性

参考：CSS margin-inline-end 属性

参考：CSSマージンボトム属性

参考：CSS margin-inline 属性

参考：CSS margin-left 属性

参考：CSS margin-right 属性

参考：CSS margin-top 属性

参考：CSS writing-mode 属性