title: <button> extra padding problem in Safari
body: <p>The sample page:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Button test&lt;/title&gt;
      &lt;style&gt;
        * { border: none; margin: 0; padding: 0; }
  
        body { padding: 5em; }
  
        span { background: lightblue; display: inline-block; }
  
        button { background: red; outline: 1px solid red }
        button div { background: yellow; }
  
        button::-moz-focus-inner {
          padding: 0;
          border: 0;
        }
        button {
          -webkit-appearance: none;
          -webkit-box-sizing: content-box;
          -webkit-box-align: start;
          -webkit-border-fit: lines;
          -webkit-margin-collapse: discard;
        }
      &lt;/style&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;span&gt;Adjacent text&lt;/span&gt;&lt;button&gt;&lt;div&gt;Button&lt;/div&gt;&lt;/button&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the image:</p>
  
  <p><img src="https://i.stack.imgur.com/F832v.png"></p>
  
  <p>You can see the extra white padding in the button. Is it possible to get rid of that padding in Safari browser?</p>