负边距问题和神秘的 4px 差异答案

【问题标题】：Negative Left Margin issue and Mysterious 4px difference负边距问题和神秘的 4px 差异
【发布时间】：2012-02-13 16:58:54
【问题描述】：

我挠了很久，终于决定寻求帮助。实际上，我有一个带有两个输入（字段+按钮）的简单表单，我想将按钮放在字段上，同时将表单包装以更正文本字段的宽度+填充。

我正在使用左边距：-31px 按钮上的宽度设置为 27px。

你可以试试http://jsfiddle.net/UfK6K/ 它出现在

但是当我设置 margin-left: -32px 时，它会破坏布局。 http://jsfiddle.net/UfK6K/1/ 并出现

现在，如果我将按钮的宽度更改为任何图形，并且只要我将 margin-left 保持在负 4px 差异内，它就可以工作，但是当它像 -32px 的情况一样增加时，它就会中断。

我想了解 4px 的差异从何而来？当然，我如何才能将按钮多移到文本字段的左侧？

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

【问题讨论】：

也没有进入 FF 10 ;) 我在这些小提琴中分离了 CSS 和 HTML：jsfiddle.net/UfK6K/2 和 jsfiddle.net/UfK6K/3
@Czechnology 令人惊讶的是它起作用了，但让我感到困惑，因为这里定义了 w3schools.com/cssref/pr_class_position.asp 那个位置：绝对；相对于其第一个定位（非静态）祖先元素的位置。虽然我没有定义任何非静态元素.. 虽然 position:relative 似乎更相关，因为我想相对于它的正常位置定位但它在表单上留下了空间。 jsfiddle.net/UfK6K/5
@ShawnTaylor，这是正确的，但仅如果您使用任何实际定位。如果你不设置任何left、right等，该元素只是从“文档流”中取出（不知道如何调用它），所以不会导致这些分解问题。跨度>

标签： html css margin

【解决方案1】：

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

当任何元素设置为 inline-block 时，会发现 4px 放置在该元素的右侧。实际上它的大小是“空白”的大小，是的，它实际上是一个空白。

你可以把它想象成 inline-block 元素被一个空格隔开，它通常需要 4px，因为在 Opera 中它需要更多（虽然不确定最新版本——因为不同的字体呈现不同宽度的空格）不同的浏览器唯一在浏览器和字体大小之间呈现一致的空白宽度的字体是 Courier New。它是一种固定宽度的字体，它的空白是 0.63em 宽。）。但你明白了吗？

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

你也可以试试 font-size: 0;

在您的特定情况下，位置：绝对；似乎是最好的选择。

【讨论】：

呃……在一个愚蠢的零线高上浪费了好几个小时。谢谢。

【解决方案2】：

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

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

小提琴：jsfiddle.net/UfK6K/4

不知道为什么会中断（此处为 FF9）。 CSS 定位有时会带来很多乐趣。

【讨论】：

我还通过从输入（文本字段和按钮之间）中删除空格来使其工作。但仍然不确定 4px 差异困境。如果边框起作用，那么它应该是 2px（左右）。

【解决方案3】：

4px 来自两个输入字段之间的空白区域的渲染。该按钮移至下一行，因为您没有为在第一个输入框之后的第一行上呈现的空白留出足够的空间。

空白换行到下一行，然后在它之后呈现按钮，并移动了 margin-left 设置。

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

【讨论】：

【解决方案4】：

另一种方法是添加

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

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

负边距总是让我感到困惑......

【讨论】：

好吧，只要左边距大于-37px，它就可以工作，但是如果你将它设置为-37px，那么一旦消耗了5px的右边距，它就会再次破坏它。
因此我的评论是随着左边距的每次减少而增加右边距。我发现它必须分别是 1 到 -1。