CSS3

プロパティ

margin-trim

[Edge]⛌。→●、mdn

コンテナ辺におけるマージン。

マージンは、同胞どうしの合間には欲されても、それらのコンテナの［始端／終端］には欲されないことはよくある ─ そのアキはパディングで制御できるので。このプロパティは、［コンテナの子のマージンのうち、コンテナの辺に連接するもの］を削ることを許容する。

none

マージンは、このコンテナにより削られない。

注記： しかしながら、ブロック レイアウトにおいては、子のマージンは親のマージンと相殺され得る。マージンの相殺法 [CSS2] を見よ。

in-flow

このコンテナに包含されているフロー内にあるボックスのブロック軸マージンであって、コンテナの辺に隣接するものは、0 に切り落とされる。そのようなマージンと相殺される他のマージンもあれば、それも切り落とされる。

<DIV style="width:200px; border:1px solid red; font-size:20px;
 column-count:2;
 margin-trim:in-flow;
">ああああああああああああああああああああああ
</DIV>

¶

all

フロー内にあるボックスのマージンを in-flow に対するときと同じく削ることに加え、浮動体のマージンも ─ そのマージン辺がコンテナの内容辺に接するならば ─ 削る。

<DIV style="width:200px; border:1px solid red; font-size:20px;
 column-count:2;
 margin-trim:all;
">ああああああああああああああああああああああ
</DIV>

¶

具体的には、ブロック コンテナ上の margin-trim に対する［in-flow／all］は、次を破棄する：

• 最初の子がブロック レベルであるならば、そのブロック始端マージン。
• 最後の子がブロック レベルであるならば、そのブロック終端マージン。【最初,最後,子は、おそらく、ボックスツリーにおけるそれを意味する。】
• これらのマージンとともに相殺される他のマージンがあれば、それも。

ブロック コンテナ上の margin-trim に対する all は、当のコンテナを包含ブロックとする浮動体にも影響する：

• 浮動体のブロック始端外縁辺がコンテナのブロック始端内縁辺に接するならば、浮動体の その側のマージンは破棄される。
• ［行内始端／行内終端］に寄せられる浮動体の その側の外縁辺が、コンテナの内縁辺に接するならば、浮動体の その側のマージンは破棄される。
• コンテナの行内軸における［内在的サイズ供与、サイズ］を計算する目的においては、浮動体の行内軸マージンを 0 にする。
• 浮動体のブロック終端マージンを、［そのようなマージンが、ブロック整形文脈根のブロック サイズを拡幅する］のを防止するのに必要とされる分まで削る。

¶省く

注記： margin-break プロパティも見よ ─ それは、［断片化分断（ページ、column、等々の分断）に連接している、ボックスの自前のマージン］に適用される。

テスト