margin-inline

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

The margin-inlineCSS のプロパティで、論理的なインライン方向の先頭と末尾のマージンを設定します。これは要素の書字方向やテキストの向きに応じて物理的なマージンに変換されます。

/* <length> 値 */
margin-inline: 10px 20px;  /* 絶対的な長さ */
margin-inline: 1em 2em;    /* テキストの大きさに対する相対値 */
margin-inline: 5% 2%;      /* 直近のブロックコンテナーの大きさに対する相対値 */
margin-inline: 10px; /* 先頭と末尾の両方を設定 */

/* キーワード値 */
margin-inline: auto;

/* グローバル値 */
margin-inline: inherit;
margin-inline: initial;
margin-inline: unset;

これらの値は、 margin-topmargin-bottom、または margin-rightmargin-left プロパティに、 writing-mode, direction, text-orientation で定義された値にしたがって対応します。

値は margin-inline-startmargin-inline-end で個別に設定することができます。ブロック方向のプロパティは margin-block で、 margin-block-startmargin-block-end を設定します。

構文

margin-inline プロパティは、 margin-left プロパティと同じ値を取ります。

形式文法

<'margin-left'>{1,2}

HTML

<div>
  <p class="exampleText">Example text</p>
</div>

CSS

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  margin-inline: 20px 40px;
  background-color: #c8c800;
}

仕様書

仕様書 状態 備考
CSS Logical Properties and Values Level 1
margin-inline の定義
編集者草案 初回定義
初期値0
適用対象same as margin
継承なし
パーセンテージdepends on layout model
計算値長さで指定されると相当する絶対的な長さ、パーセンテージとして指定されると指定値、それ以外では auto
アニメーションの種類個別

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
margin-inlineChrome 完全対応 69Edge 完全対応 79Firefox 完全対応 66IE 未対応 なしOpera 完全対応 56Safari 未対応 なしWebView Android 完全対応 69Chrome Android 完全対応 69Firefox Android 完全対応 66Opera Android 完全対応 48Safari iOS 未対応 なしSamsung Internet Android 完全対応 10.0

凡例

完全対応  
完全対応
未対応  
未対応

関連情報