Negative Left Margin issue and Mysterious 4px diff

问题:

I am scratching my head for quite a long time and finally decided to ask for help. Actually I have a simple form with two inputs (field + button) and I want to bring button over field while wrapping the form to correct width of text field + padding.

I am using margin-left: -31px on button which is set width of 27px.

You can try it at http://jsfiddle.net/UfK6K/ and it appears

BUT when I set margin-left: -32px it breaks the layout. http://jsfiddle.net/UfK6K/1/ and appears

Now if I change width of button to any figure and as long I keep margin-left within negative 4px difference it works but when it increases like in case of -32px it breaks.

I want to understand from where difference of 4px comes into play? And Of course how I can move button bit more left over text field?

*It breaks in all browsers except Opera.

回答1:

Well its a very tricky question that from where 4px comes from. I'll try to answer it.

When any element is set display to inline-block then 4px are found to be placed at right side of this element. Actually its the size a 'white space' takes, yes its actually a white space.

You can think of it as that inline-block element are separated by a white space and it usually takes 4px because in Opera it takes bit more (not sure about latest version though -- because different fonts render whitespace with different widths in different browsers the only font that renders a consistent white-space width across browsers and font sizes is Courier New. it is a fixed width font, and it’s whitespace is 0.63em wide.). But you get the point?

Now there are various work around like float:left or even setting negative 4px letter spacing of parent element which contains inline blocked elements.

You can also try font-size: 0;

And in your particular case position:absolute; seems to be best option.

回答2:

You could add position: absolute; to the button's CSS.

.sbutton {
    position: absolute;
    margin-left: -30px;
    margin-top: 1px;
    /* ... */
}

Fiddle: jsfiddle.net/UfK6K/4

Not sure why it breaks (FF9 here). CSS positioning can cause lots of fun sometimes.

回答3:

The 4px comes from the rendering of the white space between the two input fields. The button moves on to the next line because you're not leaving sufficient space for the white space to be rendered on the first line after the first input box.

The white space wraps to the next line and the button is then rendered after it, shifted by the margin-left setting.

As you've already discovered, removing the white space between the input box solves the problem. The alternative in CSS would have been to add white-space: nowrap; to the form styling.

回答4:

Another way that you could do it is by adding

.sbutton {
    margin-right: 5px;
    margin-left: -32px;
}

and for some reason that fixes it. Then for every pixel-decrease in margin left, increase the margin right.

negative-margins have always confused me...