Search code examples
cssgoogle-chromewebkitblink

In Chrome’s user agent stylesheet, why use "-webkit-margin-before" et al instead of just "margin-top" et al?

-webkit-margin-{before,after,start,end} can be overriden by margin-{top,bottom,left,right} respectively. Why does Chrome’s user agent stylesheet not just use the standard margin- declarations?

enter image description here

Solution

  • This is to do with layout direction.

    So -webkit-margin-start is like margin-left when the layout direction is left-to-right, but like margin-right when the direction is right-to-left.

    See http://jsfiddle.net/jLnz2jd1/ (In Chrome, obviously)

    In contexts where directionality matters, the user-agent values for these properties can be overridden. Where it doesn't matter the fallback to the standard margin properties is automatic.