Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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

Tags: input span height

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

Problem

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?

Orders

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

P.S.: Don't write possible duplicate of How to make the same height as because I don't need things to be vertically aligned to the middle.

Problem courtesy of: Lorraine Bernard

Solution

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.

Solution courtesy of: Blazemonger

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

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

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×