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 にも適用されます。 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
margin-trim =
none |
[ block || inline ] |
[ block-start || inline-start || block-end || inline-end ]
例
基本的な使用
このプロパティへの対応が実装されたら、次のように動作するでしょう。
インラインの子を持つ包含ブロックがあり、それぞれの子の間にマージンを入れたいが、行末の空間とは干渉しないようにするには、次のようにします。
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 |
ブラウザーの互換性
Loading…