26

Webkit have added its own specific margins which are:

-webkit-margin-before:
-webkit-margin-after:
-webkit-margin-start:
-webkit-margin-end:

I understand the difference of (margin-left and -webkit-margin-start) or (margin-right and -webkit-margin-end) which is related to "left to right" or "right to left" languages.

My question is what is the difference between (margin-top and -webkit-margin-before) or (margin-bottom and -webkit-margin-after) ?

Note: It is obvious that -webkit prefix only works on webkit engine browsers such as chrome and safari. This question is not related to it.

Arashsoft
  • 2,749
  • 5
  • 35
  • 58
  • 2
    I've been unable to find any official documentation for `-webkit-margin-before` and `-webkit-margin-after`. I can only assume that these relate to "top to bottom" and "bottom to top" languages. I wasn't sure if "bottom to top" languages even existed, but this website lists a few examples: http://www.omniglot.com/writing/direction.htm – MarkPlewis Nov 06 '15 at 21:33
  • 1
    @MarkPlewis, That is interesting! maybe the -webkit-margin-before acts as margin-bottom in "bottom to top" languages. – Arashsoft Nov 09 '15 at 21:16

2 Answers2

24

The best answer I could find so far is -web-margin-before acts same as margin-top on normal documents but it will act as margin-bottom on "bottom to top" languages (same idea applies to -webkit-margin-after).

You can find a number of "bottom to top" languages in this link omniglot.com/writing/direction.htm (thanks to @MarkPlewis)

Arashsoft
  • 2,749
  • 5
  • 35
  • 58
  • 3
    A useful thing to know is that they are the "generic" case of margins. in [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) for example, it correctly sets the element's margin according to `flex-direction`, whereas `margin-` doesn't do anything. – Kilves Oct 25 '17 at 00:38
0

While Chrome and WebKit supports all the properties and keywords from -webkit-, Safari only supports start (Mozilla does a bit better as it supports both start and end). All these properties are said to work in Safari 6 though; so when that ships, we will need to replace top, right and bottom values with the prefixed properties to make our styling “direction” agnostic.

Basically -webkit- can be used to target different browsers like Safari, Chrome and Firefox. Detail article can be found here.

This article discusses the creation of a base styles sheet for WebKit-based browsers.

To prevent from not applying -webkit- values I use:

*, *:before, *:after {
    box-sizing: inherit;
}
prashmi
  • 93
  • 2
  • 12