[csswg-drafts] [css-box-4] Padding/Margin horizontal and vertical shorthands (#6507)

finnp has just created a new issue for https://github.com/w3c/csswg-drafts:

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

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

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

into 

```css
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
```css
margin-left: 10px;
margin-right: 10px;
```

as 
```css
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

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6507 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 10 August 2021 16:40:57 UTC