-webkit-margin-before 是CSS3.0对于文章段P容器的定义方法语句。
display：block只定义了P容器为一个块，
而：-webkit-margin-brfore/after：1em ---- 分别定义P的上边距和下边距的数值是1倍字体高度，如果是10px的字，那么边距就为10px;
-webkit-margin-start/end：0px ---- 定义P容器为左右边距都为0px。
也就是说CSS3中：
p {
display： block;
-webkit-margin-before：1em;
-webkit-margin-end：1em;
-webkit-margin-after：1em;
-webkit-margin-start：1em;
}
相当于CSS2中：
p {
display： block;
margin-top： 1em;
margin-right： 1em;
margin-bottom： 1em;
margin-left： 1em;
}
但由于CSS3要求浏览器版本较高，所以国内并没有流行CSS3样式，依然以CSS2为主流，但以后应该是CSS3的天下，因为它代表着先进。
浏览器内核：
webkit最初是Apple公司的一个开源项目，他们自家的Safari有用，之后Google也是用这个排版引擎加上自己的V8 JavaScript引擎建立了一个开源的浏览器项目Chromium，并且利用这个项目只做了自家的Chrome。同时这两家在移动平台上的浏览器内核都是用的webkit。得益于Chromium引擎，在PC平台上也有很多的webkit浏览器：360、世界之窗、枫树浏览器、太阳花浏览器、搜狗浏览器、遨游3、猎豹浏览器。基本上说自己是双核，有什么极速模式的，都是用的Chromium，相对应的，Microsoft（微软）的IE用的是Trident排版引擎，也就是常说的IE内核，Firefox也有自己的Gecko排版引擎。Apple的iBooks同样也使用了webkit作为排版引擎，而Sigil这个编辑软件，用的则是Chromium，因为也是webkit内核。
浏览器前缀：
常用：-webkit-（Chrome）、
-moz-（Firefox）、
-0-（Opera）、
-ms-（IE）
为什么要有私有前缀呢：
制定HTML和CSS标准的组织W3C动作是很慢的，通常，有W3C组织成员提出一个新属性，比如说圆角border-radius，大家都觉得好，但是W3C不会为这个属性制定标准，而是要走复杂的程序，经过很多的审查，而浏览器商不愿意等那么久，他们觉得一个属性已经够成熟了，就会在浏览器中加入支持，但是避免日后W3C公布了标准，border-radius的标准写法确立之后，再让新版的浏览器支持border-radius属性。
例如：Chrome10是不认border-radius这种写法的，只能用-webkit-border-radius，而Chrome12就能认了，于是在写CSS的时候，这样就能确保Chrome10和12的网页都能正常显示。
-webkit-margin-before 及 扩展浏览器前缀、内核
原文地址：https://www.cnblogs.com/cq-0715/p/9603746.html