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

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

我正在使用 左边距：-31px 打开按钮，设置宽度为27px

你可以试试看 看来

但当我设置左边距：-32px时，它破坏了布局。 出现

现在，若我把按钮的宽度改成任意一个数字，只要我把边距保持在负的4px的范围内，它就会工作，但当它增加时，就像在-32px的情况下，它就会断开

我想了解4px的差异从何而来？ 当然，我怎样才能把按钮移到文本字段的左边

---

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

您可以添加

位置：绝对到按钮的CSS

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

Fiddle:jsfiddle.net/UfK6K/4

不知道为什么会断开（这里是FF9）。CSS定位有时会带来很多乐趣。
另一种方法是添加

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

出于某种原因，这就解决了问题。然后，对于左边边距的每一个像素减少，增加右边边距

负边距总是让我困惑…
4px来自两个输入字段之间的空白渲染。该按钮将移到下一行，因为没有留出足够的空间在第一个输入框后的第一行上渲染空白

空白换行到下一行，然后在它之后渲染按钮，并按“边距向左”设置进行移动

正如您已经发现的，删除输入框之间的空白可以解决问题。CSS中的替代方案是添加
空白：nowrap到
表单
样式
 这是一个非常棘手的问题，4px从何而来。我会尽力回答的

当任何元素被设置为“显示内联块”时，就会发现4px被放置在该元素的右侧。实际上它是一个“空白”的大小，是的，它实际上是一个空白

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

现在有各种各样的解决方法，比如float:left，甚至设置包含内联阻塞元素的父元素的负4px字母间距

您也可以尝试字体大小：0

在您的特殊情况下，位置：绝对；似乎是最好的选择。
也不要打断FF 10；）我在这些小提琴中分离了CSS和HTML：@Czechnology令人惊讶地工作了，但让我感到困惑，因为这里定义了位置：绝对；相对于其第一个定位（非静态）祖先元素的位置。虽然我没有定义任何非静态元素。。whileposition:relative看起来更相关，因为我想相对于它的正常位置定位，但它在表单上留下了空间@ShawnTaylor，这是正确的，但只有在使用任何实际定位的情况下。如果您没有设置任何
左
，
右
等，元素只是从“文档流”（不确定如何调用它）中取出，因此它不会导致这些分离问题。我还通过删除输入中的空白（文本字段和按钮之间）来实现。但仍然不能确定4px差异的困境。如果边界起作用，那么它应该是2px（右和左）。只要左边界大于-37px，它就会工作，但如果你将它设置为-37px，那么它将再次破坏它，消耗5px的右边界。因此，我的评论是，随着左边界的每一次减少，右边的边界都会增加。我发现它必须分别是1比1。啊……在一个愚蠢的零线高度上浪费了几个小时的时间。非常感谢。