Persistent margin and 1px height difference around input elements

Question

I'm having a problem with input elements:

problematic input elements

Even though in that picture their css is

margin: 0;
padding: 0;

They still have that slight margin I can't get rid of. I had to use a negative margin of -4px to get the button to stay close to the text field.

Also, when doing further styling I end up with a problem between Firefox and Chrome: submit buttons seem to not have the same height. Setting an height which makes the submit button fit together with the input bar on Chrome breaks it on Firefox and vice-versa. There seems to be no apparent solution.

1px difference between buttons http://gabrielecirulli.com/p/20110702-170721.png

In the image you can see that where in Chrome (right) the button and input field fit perfectly, in Firefox they'll have a height difference of 1px.

Is there a solution to these 2 problems (the persistent margin and the 1px difference)?

EDIT: I've fixed the first problem, it was caused by the fact that the two elements were separated by a newline in the html code. The second problem persists, though, as you can see here: by highlighting the shape of the two elements, you can see that in Firefox (left) the button is 2px taller than in Chrome (right) There's still a difference between the two elements

please post your code.
check the font-size, height, border-top, border-bottom css properties. — SAIF, Jul 02 '11 at 20:29

NGLN · Accepted Answer · 2011-07-02T16:53:02.330

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.

Ben · Answer 2 · 2011-07-02T15:32:19.827

1

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.

edited Jul 02 '11 at 15:32

answered Jul 02 '11 at 15:19

Ben

16,275
9
45
63

The 2nd issue appears in your fiddle too: http://gabrielecirulli.com/p/20110702-172143.png (left Firefox, right Chrome) – kettlepot Jul 02 '11 at 15:23
@Gabriele, you can solve this by setting a fixed height. Buttons are tricky because they not only depend on the browser you're on, they also depend on the OS the browser is running on. Check the updated fiddle. – Ben Jul 02 '11 at 15:34
I tried that too. When you do that, another problem arises between the two browsers: http://gabrielecirulli.com/p/20110702-173514.png – kettlepot Jul 02 '11 at 15:36
2

To fix this: http://www.gabrielecirulli.com/p/20110702-173514.png (I see this bug in Firefox) you should add 'vertical-align: top;' for input element (and maybe for button too). – Vladimir Jul 02 '11 at 16:53

score 1 · Answer 3 · edited May 23 '17 at 12:25

1

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

edited May 23 '17 at 12:25

Community

1
1

answered Jul 03 '11 at 04:35

Boris Zbarsky

34,758
5
52
55

score 0 · Answer 4 · answered Apr 24 '13 at 14:13

0

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;

answered Apr 24 '13 at 14:13

sledgeweight

7,685
5
31
45

score 0 · Answer 5 · answered Jul 10 '16 at 14:57

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.

Persistent margin and 1px height difference around input elements

5 Answers5

Linked