margin-trim

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

margin-trim プロパティにより、コンテナーの辺に隣接する子のマージンを切り取ることができます。

構文

css
margin-trim: none;
margin-trim: block;
margin-trim: block-start;
margin-trim: block-end;
margin-trim: inline;
margin-trim: inline-start;
margin-trim: inline-end;

/* グローバル値 */
margin-trim: inherit;
margin-trim: initial;
margin-trim: revert;
margin-trim: revert-layer;
margin-trim: unset;

none

マージンは包含ブロックで切り取られません。

block

コンテナーの辺に隣接するブロックの子に指定されたマージンは、コンテナーに指定されたマージンに影響を与えることなく、ゼロに切り詰められます。

block-start

コンテナーの端にある最初の子ブロックのマージンはゼロに切り詰められます。

block-end

コンテナーの端にある最後の子ブロックのマージンはゼロに切り詰められます。

inline

コンテナーの辺に隣接するインラインの子に指定されたマージンは、行の始まりと終わりの空間に影響を与えることなく、ゼロに切り詰められます。

inline-start

コンテナーの辺と最初のインラインの子との間のマージンはゼロに切り詰められます。

inline-end

コンテナーの辺と最後のインラインの子との間のマージンはゼロに切り詰められます。

公式定義

初期値none
適用対象ブロックコンテナーと段組みコンテナー。 ::first-letter にも適用されます。
継承なし
計算値指定通り
アニメーションの種類離散値

形式文法

margin-trim = 
none |
[ block || inline ] |
[ block-start || inline-start || block-end || inline-end ]

基本的な使用

このプロパティへの対応が実装されたら、次のように動作するでしょう。

インラインの子を持つ包含ブロックがあり、それぞれの子の間にマージンを入れたいが、行末の空間とは干渉しないようにするには、次のようにします。

css
article {
  background-color: red;
  margin: 20px;
  padding: 20px;
  display: inline-block;
}

article > span {
  background-color: black;
  color: white;
  text-align: center;
  padding: 10px;
  margin-right: 20px;
  margin-left: 30px;
}

ここでの問題は、行の右に 20px の間隔が空きすぎてしまうことで、それを修正するためにこのようにするのではないでしょうか。

css
span:last-child {
  margin-right: 0;
  margin-left: 0;
}

これを実現するために別のルールを書かなければならないのは面倒ですし、柔軟性もありません。代わりに、 margin-trim で解決できます。

css
article {
  margin-trim: inline-end;
  /* … */
}

同様に、コンテナーのエッジで左マージンを除去する場合は次のようにします。

css
article {
  margin-trim: inline-start;
  /* … */
}

仕様書

Specification
CSS Box Model Module Level 4
# margin-trim

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
margin-trim
Experimental
block
Experimental
block-end
Experimental
block-start
Experimental
inline
Experimental
inline-end
Experimental
inline-start
Experimental
none
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

関連情報