Persistent margin and 1px height difference around input elements

Question

I\'m having a problem with input elements:

Even though in that picture their

Answer 1

For your second issue, see How to reset default button style in Firefox 4 +

Answer 2

Try this one: demo fiddle.

HTML:

<span><input type="text" /><input type="submit" /></span>

CSS:

span, input {
    margin: 0;
    padding: 0;
}
span {
    display: inline-block;
    border: 1px solid black;
    height: 25px;
    overflow: hidden;
}
input {
    border: none;
    height: 100%;
}
input[type="submit"] {
    border-left: 1px solid black;
}

Tested on Win7 in IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0. Only IE7 fails since it obstinately shows a normal button-like submit input.

Answer 3

I had a glyphicon in a span next to input, which was inserting top:1px. So I set top:0px on span and the issue was fixed. But actual answer for the thread is totally problem specific and user needs to better understand the elements and css to fix it.

Answer 4

For a similar issue where I an image used as the button type="submit" and it wasn't exactly the same height as the input adjacent to it, I simply added this to the container of the two said inputs:

padding-bottom:1px;

Answer 5

Seems to me that your CSS is interfering, somewhere, with your inputs layout.

As you can see here http://jsfiddle.net/F3hfD/1/ what you're asking is doable without any problem.