[css-box-4] Padding/Margin horizontal and vertical shorthands

[finnp]

Motivation

The padding and margin shorthands for combining top/bottom and left/right are quite practical. They transform

padding-top: 10px;
paddding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;

into

padding: 5px 10px;

However they have 2 issues. The more important one is that it's easy to forget which one of these are the top/bottom and which are the left/right values. In graphics width by height is usually given in that order: width, height. So someone might incorrectly assume that left/right comes first.

The other shortcoming is that it requires you to specify both vertical and horizontal padding/margin even if you might only want to specify one.

Suggestion

Introduce a padding-horizontal, padding-vertical, margin-horizontal and margin-vertical shorthand.

This would allow to write something like

margin-left: 10px;
margin-right: 10px;

as

margin-horizontal: 10px;

I would be happy to get feedback on this, it's my first time I'm suggesting something to the CSS working group. ✨

Links

• Margins https://www.w3.org/TR/css-box-4/#margins
• Paddings https://www.w3.org/TR/css-box-4/#paddings

[myakura]

Hi. The good news is there are already such shorhands available. They are called margin/padding-block and margin/padding-inline, and are defined in the CSS Logical Properties module.

• margin-block | MDN
• margin-inline | MDN
• padding-block | MDN
• padding-inline | MDN

Technically they are not horizontal or vertical, but in many cases you can use margin/padding-inline as horizontal and margin/padding-block as vertical shorthands. I know the names and their behaviors are bit complicated, but they are already available on browsers so you can use them today.

[tabatkins]

Yup, the -inline and -block shorthands handle this already.