负左边缘问题和神秘的4px差异

Question

我抓了很长时间，终于决定寻求帮助。实际上我有一个带有两个输入的简单表单（字段+按钮），我希望在将表单包装到文本字段+填充的正确宽度时将按钮放在字段上。

我正在使用 margin-left：-31px 在按钮上，设置宽度为27px。

你可以在http://jsfiddle.net/UfK6K/试试 它显示为

但是当我设置margin-left：-32px时会破坏布局。 http://jsfiddle.net/UfK6K/1/并显示

现在，如果我将按钮的宽度更改为任何数字，并且我保持边距保持在负4px差异范围内，则可以正常工作，但是当它增加时，就像-32px一样，它会中断。

我想了解4px的差异在哪里发挥作用？ 当然，我如何在文本字段上移动按钮位？

*除了Opera之外，它在所有浏览器中都会中断。

Answer 1

这是一个非常棘手的问题，从4px来自哪里。我会尽力回答。

当任何元素设置显示为内联块时，则发现4px位于此元素的右侧。实际上它的大小是“白色空间”，是的，它实际上是一个白色空间。

您可以将其视为内联块元素由空格分隔，并且通常需要4px，因为在Opera中它需要更多（虽然不确定最新版本 - 因为不同的字体呈现具有不同宽度的空白不同的浏览器是唯一一种在浏览器和字体大小上呈现一致的空白宽度的字体是Courier New。它是一个固定宽度的字体，它的空白是0.63em宽。）。但你明白了吗？

现在有各种各样的工作，比如float：left或者甚至设置包含内联被阻挡元素的父元素的负4px字母间距。

您也可以尝试使用font-size：0;

在你的特定情况下：绝对;似乎是最好的选择。

Answer 2

您可以将position: absolute;添加到按钮的CSS中。

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

小提琴：jsfiddle.net/UfK6K/4

不确定它为什么会破坏（这里是FF9）。 CSS定位有时会带来很多乐趣。

Answer 3

4px来自两个输入字段之间的空白渲染。按钮移动到下一行，因为您没有留下足够的空间，以便在第一个输入框后的第一行渲染空白区域。

白色空间包裹到下一行，然后按钮在其后移动，移动左边距设置。

正如您已经发现的那样，删除输入框之间的空白区域可以解决问题。 CSS中的替代方法是将white-space: nowrap;添加到form样式中。

Answer 4

你能做到的另一种方法是添加

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

由于某种原因修复它。然后，对于每个像素 - 左边距减少，增加右边距。

负利润一直困扰着我......