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

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 button”和“#msg input”之间发现了一个间隙，如屏幕截图所示：

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

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

注意：“#nick”的屏幕截图显示了一个更大的框，可以解释差距。只要我把第一个 </button> 和第一个 </form> 放在同一行上，中间没有 space，那个框就会缩小，但差距仍然存在。

更多截图：

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，看看魔法！

嗯，这是由于使用内联元素时元素之间的特性space——注意你已经给出了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;
}

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

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

Why do I get a gap between last element in one form and first element in second form?

html

css

opera

display