title: Margin collapsing in Google Chrome is different than other browsers for a <button> element
body: <p>I finally figured out the cause of my problem, but I cannot determine a solution, so your help is needed!</p>
  
  <p>I'm trying to style a button, and it looks great in FireFox and Internet Explorer, but not in Chrome!  I'm using negative margins here, but the issue still exists even if they're positive margins.</p>
  
  <p>Here's the code, simplified to illustrate the problem:</p>
  
  <pre><code>&lt;div style="display: inline-block;"&gt;
      &lt;span style="display: block; margin: -20px; width: 100px; height: 100px;"&gt; div &lt;/span&gt;
  &lt;/div&gt; &lt;!-- DIV works the same in all browsers --&gt;
  
  &lt;button style="display: inline-block;"&gt;
      &lt;span style="display: block; margin: -20px; width: 100px; height: 100px;"&gt; button &lt;/span&gt;
  &lt;/button&gt; &lt;!-- BUTTON ignores margins in Chrome only --&gt;
  </code></pre>
  
  <p>​
  Here's the expected result in FireFox:</p>
  
  <p><img src="https://i.stack.imgur.com/lyDio.png" alt="Expected"></p>
  
  <p>And here's the issue I see in Chrome:</p>
  
  <p><img src="https://i.stack.imgur.com/5JklN.png" alt="Actual in Chrome"></p>
  
  <p>See it yourself: <a href="http://jsfiddle.net/ScottRippey/SZV45/13/" rel="nofollow noreferrer">http://jsfiddle.net/ScottRippey/SZV45/13/</a></p>
  
  <p>It seems to me like the margins are being ignored.  However, I cannot seem to disable margin collapsing for the button!<br>
  I've tried: <code>display: inline-block; position: absolute; margin: 1px; padding: 1px; border: 1px solid white;</code></p>
  
  <p>Any ideas?</p>