我无法删除两个输入字段之间的边距答案

【问题标题】：I can't remove the margin between two input fields我无法删除两个输入字段之间的边距
【发布时间】：2012-04-07 15:10:53
【问题描述】：

我正在尝试删除搜索栏和“开始！”之间的边距此页面顶部的按钮：http://beta.linksku.com/

我已经尝试删除所有样式并添加margin:0;padding:0;border:none;，但两个元素之间仍然存在边距。我无法在 JSFiddle 上复制此问题，但它出现在我网站上的所有浏览器中。

【问题讨论】：

有什么问题？您想将“开始”按钮和输入字段靠得更近吗？
如果您在“Go！”中添加负边距（例如 margin-left: -5px）会发生什么情况按钮？

标签： html css

【解决方案1】：

这就是元素作为inline-block 的作用方式。

通常在使用inline-block元素时，通常会在段落中使用它们，因此字母之间的间距必须保持一致。 inline-block 元素也适用于此规则。

如果你想完全去除空间，你可以浮动元素。

float: left;

您还可以从模板文档中删除空格。像这样：

<input type="text" name="s" tabindex="2" /><input type="submit" value="Go!" class="btn" />

【讨论】：

可以设置font-size为0：不需要浮动！
你当然可以！我确实找到了一种更合理的方式来解决这个问题。我可能应该删除“必须”部分:)
@primatology 将字体大小设置为 0？！？！你从哪里学来的？ floating 是这种情况下的最佳答案，因为 OP 希望将元素移出正常流程以更好地控制定位 ...
设置字体大小就像将字母间距设置为 -4px imo。间距在不同的浏览器中可能会有所不同。
@Xander，同意这是一个有效的解决方案。但float 旨在用于在嵌入内容（即段落中的图像）周围流动文本，因此它不再是适合这项工作的工具，而不是字体大小技巧。

【解决方案2】：

您看到的空间是应用于内联元素的默认填充。最简单的黑客？在form 上设置font-size: 0，然后在输入和按钮上重置实际字体大小。

魔法。

form {
    font-size: 0;
}

form input {
    font-size: 12px;

为什么会发生这种情况？浏览器将inputs 之间的空白解释为文本空间，并相应地呈现。你也可以在一行中将所有元素混合在一起，但那是丑陋的代码汤。

【讨论】：

@Xander，我不同意。浏览器之间空格的宽度不一致:(
已获批准，但此解决方案需要更多击键，如果在多个领域实施，维护起来可能会很痛苦......

【解决方案3】：

那个空格是相对于你的字体大小的。您可以通过在输入的容器上添加 font-size:0 来删除它，在本例中是一个表单，如下所示：

form {
    font-size: 0;
}

【讨论】：

【解决方案4】：

在 Mac 上使用 chrome，如果我在开发者工具中将表单节点编辑为 HTML，我可以去掉空格，并删除两个结束标签之间的空格：

<form id="search" method="get" action="http://beta.linksku.com/">
        <input type="text" name="s" tabindex="2">
        <input type="submit" value="Go!" class="btn">
      </form>

变成：

<form id="search" method="get" action="http://beta.linksku.com/">
        <input type="text" name="s" tabindex="2"><input type="submit" value="Go!" class="btn">
      </form>

【讨论】：

【解决方案5】：

一种方法是删除空格，但如果你不希望出现无法阅读的单行混乱，你可以使用 HTML 注释：

<form id="search" method="get" action="http://beta.linksku.com/">
      <input type="text" name="s" tabindex="2"><!--
  !--><input type="submit" value="Go!" class="btn">
</form>

【讨论】：