CODEWITHSUNDEEP
htmlcss
Lorraine Bernard
Lorraine Bernard

Reputation: 13430

How to set the height of the input "text" and span at the same value

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.

Upvotes: 2

Views: 757

Answers (1)

Blazemonger
Blazemonger

Reputation: 93003

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.

Upvotes: 1

Related Questions