[csswg-drafts] [css-logical-props] margin, padding and border shorthands

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

== [css-logical-props] margin, padding and border shorthands ==
https://drafts.csswg.org/css-logical-props/#logical-box-props

I think it would be really useful to have shorthand properties to set the {vertical, horizontal} sides of the {margin, padding, border} of a box in one go.

The following is a frequent and common pattern: centering a block by setting the left and right margins separately, but *without overriding an inherited margin*.

```css
figure { margin: 10px; }
figure.centered {
  block-size: 50%;           /* width */
  margin-inline-start: auto; /* margin-left */
  margin-inline-end: auto;   /* margin-right */
}
```

Setting `margin: 10px auto;` is inefficient, redundant, and not future proof, so we must set the left and right margins separately to equal values. It would be nice if we could just set<br/>`margin-inline: auto`.

I propose the following shorthand properties.

property | shorthand for | syntax (excluding global values)
--------- | ------------- | -------
`margin-block` | `margin-block-start` `margin-block-end` | `<margin-width>{1,2}`
`margin-inline` | `margin-inline-start` `margin-inline-end` | `<margin-width>{1,2}`
`padding-block` | `padding-block-start` `padding-block-end` |  `<padding-width>{1,2}`
`padding-inline` | `padding-inline-start` `padding-inline-end` | `<padding-width>{1,2}`
`border-block` | `border-block-start` `border-block-end` | `<border> [ / <border> ]?`
`border-inline` | `border-inline-start` `border-inline-end` | `<border> [ / <border> ]?`
`border` | standard `border` property | `<border> [ / <border> ]{0,3}`

where `<border> = <line-width> || <line-style> || <color>`

The last 3 rows allow setting individual borders. The last row modifies the existing `border` property, with the standard 1, 2, 3, and 4-value syntax (all, vertical/horizontal, top/horizontal/bottom, and top/right/bottom/left, respectively), except separated by slashes.

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

Received on Saturday, 22 April 2017 04:20:52 UTC