Question

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

我尝试删除所有样式并添加margin:0;padding:0;border:none;，但两个元素之间仍有差距。我不能在JSFiddle上复制这个问题，但它发生在我网站上的所有浏览器中。

Answer 1

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

通常，当您使用inline-block元素时，您经常在段落中使用它们，因此字母之间的空格必须一致。 inline-block元素也适用于此规则。

如果要完全删除空格，可以浮动元素。

float: left;

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

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

Answer 2

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

魔术。

form {
    font-size: 0;
}

form input {
    font-size: 12px;

为什么会这样？浏览器将input之间的空白解释为文本空间，并相应地渲染。你也可以在一行中将所有元素一起刷，但那是丑陋的代码汤。

Answer 3

该空格与您的字体大小有关。您可以通过在输入的容器上添加font-size:0来删除它，在这种情况下是一个表单，如下所示：

form {
    font-size: 0;
}

Answer 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>

Answer 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>

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

5 个答案: