padding-x, padding-y, margin-x & margin-y #3486
Description
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-xpadding-ymargin-xmargin-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:
.selector {
padding-x: 1rem;
}The .selector will have padding-right: 1rem;,padding-bottom: 2rem;,padding-left: .5rem; and padding-top: 2rem; on each side:
.selector {
padding: 2rem;
padding-x: 1rem;
padding-left: .5rem;
}The .selector will have padding-left: 1rem; and padding-left: 1rem; on each side:
.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:
.selector {
padding: 0 1rem;
}... but this overrides the top and bottom values and could lead to unexpected results.
What do you think?