Skip to content

[css2] min/max-height and margin collapse is not interoperable #8919

Open
@Loirooriol

Description

@Loirooriol

https://drafts.csswg.org/css2/#collapsing-margins

bottom margin of a last in-flow child and bottom margin of its parent if the parent has auto computed height

Note the above rules imply that:

  • The bottom margin of an in-flow block box with a height of auto and a min-height of zero collapses with its last in-flow block-level child’s bottom margin if the box has no bottom padding and no bottom border and the child’s bottom margin does not collapse with a top margin that has clearance.

The note mentions a requirement for min-height: 0, where does this come from? The normative text only mentions min-height for a different case.

Testcase: https://software.hixie.ch/utilities/js/live-dom-viewer/saved/11745

  • Gecko and Blink collapse as long as min-height doesn't increase the height.
  • WebKit collapses regardless of min-height.

What about max-height? https://software.hixie.ch/utilities/js/live-dom-viewer/saved/11746

  • Gecko and Blink collapse as long as max-height doesn't decrease the height.
  • WebKit collapses regardless of max-height.

Worth noting that there is also this other case:

top and bottom margins of a box that does not establish a new block formatting context and that has zero computed min-height, zero or auto computed height, and no in-flow children

Testcase: https://software.hixie.ch/utilities/js/live-dom-viewer/?saved=11751

Collapses Spec Gecko Blink WebKit
height: 1px; max-height: 0px ✔️
height: 100% (indefinite) ✔️ ✔️
min-height: 100% (indefinite) ✔️

Should the spec change to align with some browser? At least remove the spurious min-height: 0 from the note, or enforce it in the normative text.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions