Margin Collapse Controls

This page is recording ideas on margin controls.

Syntax Summary

margin-trim: none | block | inline | <logical-sides>
margin-trim-skip: <'margin-trim'>
margin-break: [ auto | keep | discard ] keep?
margin-collapse: [ auto | separate | discard ]{1,2}
  margin-start-collapse
  margin-end-collapse

<logical-sides> = inline-start || inline-end || block-start || block-end

margin-trim

margin-trim suppresses child margins at the specified edges of the box. Issue 6643

When applied to a box generating a fragmentation context, it trims also at the start and end of each generated fragmentation container unless those margins have margin-break: keep.

margin-trim-skip

margin-trim-skip gives child boxes a way to opt the specified side margins out of any margin-trimming imposed by their parent.

margin-break

margin-break allows boxes to control whether their margins are kept or discarded when appearing at the start or end of a fragmentation container (such as a page, column).

The second value applies to the end axis. It otherwise defaults to discard (as block-end margins are always truncated at fragmentation breaks).

ISSUE: Should margin-break also apply to the inline axis? The initial value's behavior would have to be different, since inline boxes currently keep always (maybe a normal initial value? or disallow auto behavior for inlines and make it compute to keep?). Also in the case of inline layout, we'd want the second keyword to default to the first.

margin-collapse

margin-*-collapse is the standard “I want to control whether margins collapse” rule that people request all the time.

Future Extension

(This is marked as a future extension, because it would be the hardest one to implement.)