[css-box-4] Adding physical versions of (margin|padding|border)-(inline|block)

[yassh]

• margin-block
• margin-inline
• padding-block
• padding-inline
• border-block
• border-inline

These logical properties are useful features. However, when used in combination with CSS written in traditional physical properties, it results in a mix of logical and physical properties, compromising code consistency.

If there were properties named in physical versions (such as margin-vertical, margin-horizontal, padding-vertical, padding-horizontal, border-vertical, border-horizontal), they could be more conveniently used in physically-based CSS.

[Loirooriol]

See #6507, there doesn't seem to be a need for these given the existence of the logical shorthands.

mix of logical and physical properties, compromising code consistency

Doesn't seem a strong reason to me, you could also switch your code to only use logical properties instead.

[yassh]

@Loirooriol
Thank you for your feedback.

In large-scale projects or legacy codebases where a complete transition to logical properties is difficult, I believe that physical shorthand properties like margin-vertical and margin-horizontal would help maintain consistency in a codebase centered around physical properties.

[fantasai]

@yassh You can mix and match physical and logical properties. They cascade together properly.

[yassh]

@fantasai
Thank you for your feedback.

I believe there is a demand to avoid mixing physical and logical properties when writing CSS, and to maintain consistency and intuitiveness in layout design by consistently using physical properties.
Based on this demand, the physical versions of (margin|padding|border)-(inline|block) would be beneficial.

[jfkthame]

I don't have a strong opinion on whether we should actually do this, but if we were to add such properties, I think the appropriate naming would be margin-x and margin-y (etc), by analogy with existing properties like overflow-{x,y} and background-position-{x,y}.