Page MenuHomePhabricator

Use mixin or variable for preventing margin collapse
Open, Needs TriagePublic

Description

Background

Coming from T312822 and another patch recently merged into Vector, I would like to propose not relying on transparent borders to prevent margin collapsing.
It is error-prone in theming environment, as border colors might generally be overridden.

Vector already mixes two different approaches:

  1. the border: npx solid transparent and margin-top: negative-border and
  2. the padding-top: 0.05px

Goal

Provide a mixin or a variable in core to prevent margin collapsing.

Developer notes

Take into account that parent>child and adjacent elements collapsible margins are necessary to be handled differently.

display: flow-root is forward-looking solution (no IE11 support) for parent-child margin collapsing:
https://caniuse.com/?search=flow-root

Event Timeline

I personally would rely on paddings as mostly you could only work with padding-top. Maybe we'd need a padding-bottom var too. Start and end collapsing seems improbable.

Something along the lines of padding-top-margin-collapse-prevent?

Volker_E updated the task description. (Show Details)