Html 我无法删除两个输入字段之间的边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9832754/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
I can't remove the margin between two input fields
提问by Leo Jiang
I'm trying to remove the margin between the search bar and the "Go!" button at the top of this page: http://beta.linksku.com/
我正在尝试删除搜索栏和“开始！”之间的边距。此页面顶部的按钮：http: //beta.linksku.com/
I've tried removing all styles and adding margin:0;padding:0;border:none;, but there is still a margin between the two elements. I cannot replicate this problem on JSFiddle, but it occurs in all browsers on my website.
我试过删除所有样式并添加margin:0;padding:0;border:none;，但两个元素之间仍然存在边距。我无法在 JSFiddle 上复制此问题，但它出现在我网站上的所有浏览器中。
回答by martinjlowm
This is how elements function as inline-block.
这就是元素如何作为inline-block.
Normally when you use inline-blockelements, you often use them inside a paragraph, so the space between the letters must be consistent. inline-blockelements apply to this rule too.
通常在使用inline-block元素的时候，经常会在段落中使用，所以字母之间的间距要保持一致。inline-block元素也适用于这条规则。
If you want to remove the space completely, you canfloat the elements.
如果要完全删除空间，可以浮动元素。
float: left;
You can also remove the whitespace from your template document. Like so:
您还可以从模板文档中删除空格。像这样：
<input type="text" name="s" tabindex="2" /><input type="submit" value="Go!" class="btn" />
回答by benesch
The space you're seeing is the default padding applied to inline elements. Simplest hack? Set font-size: 0on the form, then reset the actual font-size on the input and button.
您看到的空间是应用于内联元素的默认填充。最简单的黑客？在font-size: 0上设置form，然后在输入和按钮上重置实际字体大小。
Magic.
魔法。
form {
font-size: 0;
}
form input {
font-size: 12px;
Why does this occur? The browser interprets the whitespace between the inputs as a textual space, and renders accordingly. You can also smush all your elements together on one line, but that's ugly code soup.
为什么会出现这种情况？浏览器将inputs之间的空白解释为文本空间，并相应地呈现。您也可以在一行中将所有元素混合在一起，但这是丑陋的代码汤。
回答by Andres Ilich
That whitespace is relative to your font-size. You can remove it by adding font-size:0on the container of your inputs, in this case a form, like so:
该空白与您的字体大小有关。您可以通过添加font-size:0输入的容器来删除它，在这种情况下是一个表单，如下所示：
form {
font-size: 0;
}
回答by Russ Clarke
Using chrome on the Mac, I can get rid of the space if I edit the form node as HTML in the Developer tools, and remove the space between the two closing tags so:
在 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>
becomes:
变成：
<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>
回答by BusyBeingDelicious
One way is to remove space, but if you're not willing to have an unreadable one-line mess, you can use HTML comment:
一种方法是删除空格，但如果您不想让一行无法阅读的混乱，您可以使用 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>
