负左边距问题和神秘的 4px 差异
我纠结了好久，最后还是决定寻求帮助。实际上，我有一个带有两个输入（字段+按钮）的简单表单，我想将按钮放在字段上，同时将表单包装到正确的文本字段+填充宽度。
我正在使用 左边距：-31px 在设置宽度为 27px 的按钮上。
您可以在 http://jsfiddle.net/UfK6K/ 尝试一下 它出现 
但当我设置 margin-left: -32px 时它会破坏布局。 http://jsfiddle.net/UfK6K/1/ 并出现 
现在，如果我将按钮的宽度更改为任何数字，并且只要我将 margin-left 保持在负 4px 差异内，它就可以工作，但是当它增加时，就像-32px 它坏了。
我想了解 4px 的差异从何而来？ 当然，我如何才能将按钮移动到文本字段的左侧？
*它在除 Opera 之外的所有浏览器中都会崩溃。
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
4px 从何而来，这是一个非常棘手的问题。我会尝试回答它。
当任何元素设置显示为 inline-block 时，会发现 4px 被放置在该元素的右侧。实际上它的大小就是“空白”的大小，是的，它实际上是一个空白。
您可以将其视为内联块元素由空格分隔，通常需要 4px，因为在 Opera 中它需要更多（但不确定最新版本 - 因为不同的字体在不同的浏览器中呈现不同宽度的空格唯一能在不同浏览器和字体大小上呈现一致的空白宽度的字体是 Courier New，它是一种固定宽度字体，其空白宽度为 0.63em。）。但你明白重点了吗？
现在有各种解决方法，例如 float:left 甚至设置包含内联阻止元素的父元素的负 4px 字母间距。
您也可以尝试 font-size: 0;
在您的特定情况下位置：绝对；似乎是最好的选择。
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.
您可以将
position:absolute;添加到按钮的 CSS 中。小提琴：jsfiddle.net/UfK6K/4
不确定为什么它会损坏（此处为 FF9）。 CSS 定位有时会带来很多乐趣。
You could add
position: absolute;to the button's CSS.Fiddle: jsfiddle.net/UfK6K/4
Not sure why it breaks (FF9 here). CSS positioning can cause lots of fun sometimes.
4px 来自两个输入字段之间的空白区域的渲染。该按钮会移至下一行，因为您没有留下足够的空间来在第一个输入框之后的第一行上呈现空白。
空白区域换行到下一行，然后在其之后呈现按钮，并按左边距设置移动。
正如您已经发现的，删除输入框之间的空白可以解决问题。 CSS 中的替代方案是将
white-space: nowrap;添加到form样式中。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 theformstyling.另一种方法是添加
并出于某种原因修复它。然后，左边距每减少一个像素，右边距就会增加。
负利润一直让我困惑......
Another way that you could do it is by adding
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...