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

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;

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