Button Dynamic Padding/Height Issue on Mobile

Question

For some reason button elements have extra "padding" or "height" when compared to other elements with the same value if the value is not fixed but dynamic.

I have verified the issue myself in Chrome and Safari on iOS, and one of my friends verified the issue in Chrome on Android.

A. Fixed value for padding

span, button {
  padding: 16px;
}

The height of the button on the right is 1px more, but both elements are otherwise equal according to a console log, which actually seems to be the case.

Here is the codepen.

B. Dynamic value for padding

span, button {
  padding: calc(var(--gap) / 2);
}

@media screen and (min-width: 0px) {
  html {
    --gap: calc(10px + (40 - 10) * (100vw - 0px) / (1200 - 0));
  }
}

Clearly the button on the right is much taller than the span element on the left, even though console says they're basically equal, and the exact same value has been applied to both elements...

Here is the codepen.

• The only difference between A and B is that B doesn't use a fixed value.

• This odd behavior can be observed on both iOS and Android.

• Setting appearance to none before styling has no effect.

• Everything works as expected on desktop browsers.

Does anybody know what is going on here?

---

Updates

Applying a line-height: 1.15 and margin: 0 to the button element reduces the discrepancy.

Oddly, console claims the span element is still 1px wider (and 2px taller), even though they're effectively the exact same width if you overlay the two elements.

The text of the span element is 1px or 2px lower than the text in the button element, which makes sense because the span is 1px or 2px taller.

button {
  ...
  margin: 0;
  line-height: 1.15;
}

Here is the codepen.

I would just add a pixel or two to the button height, but unfortunately the height of many elements on my website is determined by a combination of a dynamic font-size and padding. 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.

Answer 1

let me try to support you with this issue.

What is happening here

How line-height is calculated by the browser is depending on the font definition and the browser/os itself. Try setting font-family: sans-serif instead of Arial just to try out. Further information on line-height

line-height is not applied on span unless you're changing its display property from inline (default) to something like inline-* or block or it is part of another formatting context like flexbox.

A block container element that directly contains inline-level content—such as inline boxes, atomic inlines, and text runs—establishes an inline formatting context. The line-height property specifies the minimum height of line boxes within the element.

Further information on Inline Layout Box Model

Glossary for definitions like block level, inline etc.

Side note: Also pay attention to button css defaults like margin-top, margin-bottom that can play a role and the fact that button does not inherit font styles per default.

Possible solutions

My initial idea was finding that value for Arial and setting it as line-height explicitly on button so that it would match the default one on span. But apparently it's not possible to rely on browsers calculating line-height the same on several devices even if you know the default value.

• display: inline-block on span and use the same line-height on both elements.
• Use flexbox and make use of elements having the same height.