Home/ Questions/Q 8799069
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T00:14:08+00:00

I have, on the same row, an input text and a span. In firefox

  • 0

I have, on the same row, an input text and a span.
In firefox they don’t have the same high.
To me seems that the span has a lowest height.
What is the best way to have input text and span with the same height?

<div class="form">
    <input type="text" required="required" class="data-item">
    <span class="add-on">Orders</span>
</div>​

demo: http://jsfiddle.net/BeLDD/7

P.S.:
Don’t write possible duplicate of How to make <span> the same height as <input type=“text”> because I don’t need things to be vertically aligned to the middle.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The overall height of the input tag includes its border and padding. Unfortunately, these default values vary depending on the browser.

    Explicitly set the margin, border and padding (as well as the font size) on both the span and the input using CSS until they’re the desired size. Since the input has a border and your span (probably) doesn’t, you’ll need to make those adjustments separately based on your design.

    • 0