[csswg-drafts] padding-x, padding-y, margin-x & margin-y (#3486)

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

== padding-x, padding-y, margin-x & margin-y ==
Hi there,

First time I open an issue here, the title of this issue probably needs to be changed so it contains a label like the other issues, but I couldn't find anything about it in the Contributor Guidelines, so feel free to change that.

I got a proposition to add 4 new properties:
- `padding-x`
- `padding-y`
- `margin-x`
- `margin-y`

It should be clear what they do but I'll explain it shortly with some examples:

The `.selector` will have `padding-left: 1rem;` and `padding-left: 1rem;` on each side:
```css
.selector {
  padding-x: 1rem;
}
```

The `.selector` will have `padding-right: 1rem;`,`padding-bottom: 2rem;`,`padding-left: .5rem;` and `padding-top: 2rem;` on each side:
```css
.selector {
  padding: 2rem;
  padding-x: 1rem;
  padding-left: .5rem;
}
```


The `.selector` will have `padding-left: 1rem;` and `padding-left: 1rem;` on each side:
```css
.selector {
  padding-left: 2rem;
  padding-x: 1rem;
}
```

It would basically work the same as `padding-left` and `padding-right` currently work. The implementation of the margin variants will work alike.

## Why do we need this?
These days people make a lot of use of utility classes and generating responsive spacing utility classes can generate a lot of css. Also this would simplify the code needed to generate these classes. Some examples of frameworks that work that way:
- Foundation (https://foundation.zurb.com/sites/docs/prototyping-utilities.html#padding-left-right-horizontal-axis-)
- Bootstrap (https://getbootstrap.com/docs/4.2/utilities/spacing/#examples)
- Tailwind (https://tailwindcss.com/docs/spacing)

It would also be nice if we could use these property to only override the left/right properties in one property. Sometime this is used to set `padding-left` and `padding-right` in one property:
```css
.selector {
  padding: 0 1rem;
}
```
... but this overrides the top and bottom values and could lead to unexpected results.

What do you think?





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

Received on Sunday, 6 January 2019 12:48:04 UTC