CODEWITHSUNDEEP
androidhtmlioscssmobile
oldboy
oldboy

Reputation: 5954

Button Dynamic Padding/Height Issue on Mobile

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;
}

enter image description here

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));
  }
}

enter image description here

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.

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;
}

enter image description here

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.

Upvotes: 6

Views: 2353

Answers (3)

Nikesh Kumar
Nikesh Kumar

Reputation: 419

Line height / pixels depends on browser and OS, so height varies on both button & span.

Try Below code, that will help you to get height

span, button{ display:inline-block; padding:0 15px; height:45px; line-height:45px;}

span {
          margin-right: 5px;
        }
    
        button {
          outline: none;
          border: none;
        }
    
        span, button {
          display:inline-block;  
          padding: 0 15px;
          height:45px;
          line-height:45px;
          font-family: arial;
          font-size: .704265875rem;
          color: #fff;
          border-radius: 5px;
          background: #4d4d4d;
          -webkit-appearance: none; appearance: none;
        }
<span>NEGOTIATE</span><button>NEGOTIATE</button>

Upvotes: 0

Anji
Anji

Reputation: 715

By default button is having display:inline-block(inspect the button element by default every element have some default styles) where as span element is having display:inline. for inline elements line-height will not work. try to convert the span element in to inline-block element. 

span{
   display:inline-block;
}

you can also use css float or flex.

more info on inline-elements:- Inline elements don't start on new lines, meaning that they'll line up right next to each other on the same line if there's enough room for them. If you don't understand the different rules that apply to inline elements, your CSS can be incredibly frustrating. For example, inline elements can't take a top or bottom margins, or width or height properties. But, they can still by styled with left and right margins as well as with padding. If you didn't know the specific rules that inline elements follow, you'd surely have a headache.

For more differences between inline and block level elements read the below article. https://codeburst.io/block-level-and-inline-elements-the-difference-between-div-and-span-2f8502c1f95b

Upvotes: 0

webwelten
webwelten

Reputation: 1593

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.

Upvotes: 1

Related Questions