CSS logical flow relative margins, paddings and borders

Chrome now implements logical margin, padding, and border CSS properties using standard names, specifically margin-{block,inline}-{start,end}, padding-{block,inline}-{start,end} and border-{block,inline}-{start,end}-{width,style,color}. These capabilities were previously supported through -webkit prefixes and non-standard names. Shorthand properties are only added for border-{block,inline}-{start,end}.

Comments

https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/

Documentation

Specification

Working draft or equivalent

Status in Chromium

Blink>CSS


Enabled by default (tracking bug) in:

  • Chrome for desktop release 69
  • Opera release 56
  • Opera for Android release 56

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Owners

Last updated on 2018-07-19