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
プロパティにより、コンテナーの辺に隣接する子のマージンを切り取ることができます。
構文
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 にも適用されます。 |
継承 | なし |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
形式文法
例
基本的な使用
このプロパティへの対応が実装されたら、次のように動作するでしょう。
インラインの子を持つ包含ブロックがあり、それぞれの子の間にマージンを入れたいが、行末の空間とは干渉しないようにするには、次のようにします。
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 の間隔が空きすぎてしまうことで、それを修正するためにこのようにするのではないでしょうか。
span:last-child {
margin-right: 0;
margin-left: 0;
}
これを実現するために別のルールを書かなければならないのは面倒ですし、柔軟性もありません。代わりに、 margin-trim
で解決できます。
article {
margin-trim: inline-end;
/* … */
}
同様に、コンテナーのエッジで左マージンを除去する場合は次のようにします。
article {
margin-trim: inline-start;
/* … */
}
仕様書
Specification |
---|
CSS Box Model Module Level 4 # margin-trim |
ブラウザーの互換性
BCD tables only load in the browser