为什么我会在一种形式的最后一个元素和第二种形式的第一个元素之间出现差距？

Question

我有这个 html 文件：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #ff5;
}

form {
  display: inline;
}

#nick_msg {
  background: #000;
  position: fixed;
  bottom: 0;
  width: 90%;
}

#nick {
  width: 20%;
}

#nick input {
  border: 0;
  padding: 10px;
  width: 10%;
  background: #00f;
}

#nick button {
  border: 0;
  padding: 10px;
  width: 10%;
  background: rgb(130, 224, 255);
}

#msg {
  width: 80%;
}

#msg input {
  border: 0;
  padding: 10px;
  width: 60%;
}

#msg button {
  border: 0;
  padding: 10px;
  width: 10%;
  background: rgb(130, 224, 255);
}

#messages {
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #fff;
}

<ul id="messages">
  <li>msg</li>
  <li>msg</li>
  <li>msg</li>
  <li>msg</li>
  <li>end</li>
</ul>
<div id='nick_msg'>
  <form id='nick' action="">
    <input id="n" /><button>Join</button>
  </form>
  <form id='msg' action="">
    <input id="m" autocomplete="off" /><button>Send</button>
  </form>
</div>

现在，我在“#nick 按钮”和“#msg 输入”之间发现了一个空白，如下图所示：

所以，我将内容窗口设置为 1000 像素，并查看了其他元素。 #nick_msg 为 900 像素，#nick 输入和按钮以及 #msg 按钮为 90 像素，#msg 输入为 540 像素，右侧还有一个 90 像素的间隙（黑色的间隙和右外侧的另一个 100 像素的白色间隙）。 input 和 button 标签的边距为 10px，因此它们的内部尺寸应为 70px（大的为 520px）。表单的大小显示为 auto x auto，但选择它只会显示一个大小为 180px 或 630px 的选择框。但是，这两种形式之间还是有一点差距。 我已经尝试将两个表单标签写在一行上，中间没有空格，这里没有变化。 （不再确定这个，因为考虑到接受的答案，这应该已经解决了问题，在我后来的测试中，它实际上是。） 那么，是什么导致了差距，我需要改变什么来消除这个差距？

浏览器：Opera 47.0.2631.55 Gentoo/Linux (x86_64)

注意：“#nick”的屏幕截图显示了一个更大的框，可以解释差距。一旦我将第一个 </button> 和第一个 </form> 放在同一行且之间没有空格，该框就会缩小，但差距仍然存在。

更多截图：

• https://i.stack.imgur.com/3bvGM.png（正文 - 上面内嵌的图片）
• https://i.stack.imgur.com/W0ySx.png (#nick_msg)
• https://i.stack.imgur.com/EaSBt.png (#nick)
• https://i.stack.imgur.com/vErgd.png（#nick 输入）
• https://i.stack.imgur.com/z0O1u.png（#nick 按钮）
• https://i.stack.imgur.com/jySAQ.png (#msg)
• https://i.stack.imgur.com/EtMvq.png（#msg 输入）
• https://i.stack.imgur.com/pUibf.png（#msg 按钮）

Answer 1

将font-size: 0 设置为您的form 并看到魔法！

嗯，这是由于使用 inline 元素时元素之间的 特征 空间 - 请注意，您已将 display: inline 分配给您的 form。

form 元素的浏览器样式将覆盖零字体大小，或者您可以使用 font-size: initial 自己完成。

请看下面的演示：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #ff5;
}

form {
  display: inline;
  font-size: 0;
}

#nick_msg {
  background: #000;
  position: fixed;
  bottom: 0;
  width: 90%;
}

#nick {
  width: 20%;
}

#nick input {
  border: 0;
  padding: 10px;
  width: 10%;
  background: #00f;
}

#nick button {
  border: 0;
  padding: 10px;
  width: 10%;
  background: rgb(130, 224, 255);
}

#msg {
  width: 80%;
}

#msg input {
  border: 0;
  padding: 10px;
  width: 60%;
}

#msg button {
  border: 0;
  padding: 10px;
  width: 10%;
  background: rgb(130, 224, 255);
}

#messages {
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #fff;
}

<ul id="messages">
  <li>msg</li>
  <li>msg</li>
  <li>msg</li>
  <li>msg</li>
  <li>end</li>
</ul>
<div id='nick_msg'>
  <form id='nick' action="">
    <input id="n" /><button>Join</button>
  </form>
  <form id='msg' action="">
    <input id="m" autocomplete="off" /><button>Send</button>
  </form>
</div>

Answer 2

我已经复制了代码here，我认为（但我不确定），如果你在谈论黑色小垂直线，你必须将font-size: 0; 添加到form 样式。

form {
    display: inline;
    font-size: 0;
}

试着告诉我们

Answer 3

您可能想要添加更改您在 CSS 中为您的表单添加边距属性。

form {
    display: inline;
    margin: 0 -0.5em 0 -0.5em;
}

这应该消除左右表格之间的空间（因为您的表格在同一行）。希望这会有所帮助:)