Webkit Margin Before no Chrome

webkit no chrome

<h1>Problemas com margin-top no Chrome</h1>

<p>Quando você utilizar no layout a propriedade CSS margin-top, provavelmente algum problema você terá no margin-top com os browsers que utilizam -webkit(Chrome & Safari).Realizando pesquisas fui achando diversos problemas que outras pessoas também enfrentaram, mas uma coisa que me chamou muito a atenção foi a solução desse problema.</p>

<h2>Utilizando o -webkit-margin-before</h2>

<p>Vamos considerar que você utilizou um reset.css e dentro desse arquivo tem uma configuração assim </p>

<h3>Exemplo</h3>
<code>p{margin-top:15px;-webkit-margin-before:15px;}</code>

<p>ao testar no Firefox vai aparecer apenas o margin-top <code> p{margin-top:15px;}</code> agora se for verificar o mesmo CSS no Chrome vai 
aparecer conforme está logo abaixo.</p>

<code>p{margin-top:15px;-webkit-margin-before:15px;}</code>
<iframe width="100%" height="300" src="http://jsfiddle.net/leonardo403/7s08L3fj/2/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>