[css-logical-props] margin, padding, and border axis-specific shorthands

[chharvey]

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 a cascading margin.

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

Setting margin: logical 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
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-line> [ / <border-line> ]?
border-inline	border-inline-start border-inline-end	<border-line> [ / <border-line> ]?
border	standard border property	logical? <border-line> [ / <border-line> ]{0,3}

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

The last 3 rows allow setting individual borders, with <border-line> groups separated by slashes. The last row modifies the existing border property, with the 1, 2, 3, and 4-value syntax in standard order.

[fantasai]

Ahhh, thanks for filing this. It was on my to-do list, but I forgot. :( It was resolved in https://lists.w3.org/Archives/Public/www-style/2013May/0201.html

[fantasai]

Fixed in 1cc3fc2

[chharvey]

@fantasai I just realized, could we add these shorthands for setting the width/style/color of just two sides?

• border-block-width
• border-block-style
• border-block-color
• border-inline-width
• border-inline-style
• border-inline-color

Or is that getting too fine-grained?

I could see it used like so:

.alert {
  border: 2px solid red;
  border-block-style: dotted;
}