title: Button Dynamic Padding/Height Issue on Mobile
body: <p>For some reason <code>button</code> elements have extra &quot;padding&quot; or &quot;height&quot;  when compared to other elements with the same value <strong>if the value is not fixed but dynamic.</strong></p>
  <p>I have verified the issue myself in Chrome and Safari on iOS, and one of my friends verified the issue in Chrome on Android.</p>
  <h1>A. Fixed value for padding</h1>
  <pre><code>span, button {
    padding: 16px;
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/6wbiHm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6wbiHm.png" alt="enter image description here" /></a></p>
  <p>The height of the <code>button</code> on the right is <code>1px</code> more, but both elements are otherwise equal according to a console log, which actually seems to be the case.</p>
  <p><em>Here is the <a href="https://codepen.io/tOkyO1/pen/LYPpyqW" rel="noreferrer">codepen</a>.</em></p>
  <h1>B. Dynamic value for padding</h1>
  <pre><code>span, button {
    padding: calc(var(--gap) / 2);
  }
  
  @media screen and (min-width: 0px) {
    html {
      --gap: calc(10px + (40 - 10) * (100vw - 0px) / (1200 - 0));
    }
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/h5rLcm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/h5rLcm.png" alt="enter image description here" /></a></p>
  <p>Clearly the <code>button</code> on the right is much taller than the <code>span</code> element on the left, even though console says they're basically equal, and <em><strong>the exact same value has been applied to both elements...</strong></em></p>
  <p><em>Here is the <a href="https://codepen.io/tOkyO1/pen/wvwKdjX" rel="noreferrer">codepen</a>.</em></p>
  <ul>
  <li><p>The only difference between A and B is that B doesn't use a fixed value.</p>
  </li>
  <li><p>This odd behavior can be observed on both iOS and Android.</p>
  </li>
  <li><p>Setting <code>appearance</code> to <code>none</code> before styling has no effect.</p>
  </li>
  <li><p>Everything works as expected on desktop browsers.</p>
  </li>
  </ul>
  <p><strong>Does anybody know what is going on here?</strong></p>
  <hr>
  <h1>Updates</h1>
  <p>Applying a <code>line-height: 1.15</code> and <code>margin: 0</code> to the <code>button</code> element reduces the discrepancy.</p>
  <p>Oddly, console claims the <code>span</code> element is still <code>1px</code> wider (and <code>2px</code> taller), even though they're effectively the exact same width if you overlay the two elements.</p>
  <p>The text of the <code>span</code> element is <code>1px</code> or <code>2px</code> lower than the text in the <code>button</code> element, which makes sense because the <code>span</code> is <code>1px</code> or <code>2px</code> taller.</p>
  <pre><code>button {
    ...
    margin: 0;
    line-height: 1.15;
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/6FgLhm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6FgLhm.png" alt="enter image description here" /></a></p>
  <p><em>Here is the <a href="https://codepen.io/tOkyO1/pen/BaBzKEZ" rel="noreferrer">codepen</a>.</em></p>
  <p>I would just add a pixel or two to the <code>button</code> height, but unfortunately the height of many elements on my website is determined by a combination of a dynamic <code>font-size</code> and <code>padding</code>. And I'd rather not have to constantly run a bunch of JS in the background to dynamically calculate the height for every element on the fly.</p>