CSS Logical Properties: Unresolved Behavior with Physical Properties and Legacy Layouts

Logical Properties Transition in CSS3

CSS3 logical properties such as margin-block and padding-inline replace physical properties to support multiple writing modes.

Unresolved Compatibility Issue

When a physical property (e.g., margin-left) and its logical counterpart (e.g., margin-inline-start) are both specified on the same element, browsers may resolve them differently across engines, especially when dir and writing-mode interact.

Additionally, the mapping of logical properties inside legacy Flexbox and Grid containers is not consistently implemented.

What is the current, standardized resolution order for conflicting physical and logical margin properties, and how does this behavior vary between major browsers? How do legacy Flexbox and Grid implementations handle logical properties when writing-mode is applied? Is there a recommended fallback strategy for cross‑browser consistency?