为什么在一种形式的最后一个元素和第二种形式的第一个元素之间出现间隙? [英] Why do I get a gap between last element in one form and first element in second form?

问题描述

我有这个html文件:

I have this html file:

* {
  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"之间出现了一个间隙，如以下屏幕截图所示:

Now, I get a gap between "#nick button" and "#msg input" like shown in this screenshot:

因此，我将内容窗口精确地设置为1000px，并查看了其他元素. #nick_msg为900px，#nick输入和按钮以及#msg按钮为90px，#msg输入为540px，右侧为另一个90px的间隙(外侧为黑色，另一个为100px的白色间隙).输入和按钮标签的所有边距均为10像素，因此其内部尺寸应为70像素(大尺寸则为520像素).表单的大小显示为auto x auto，但选择该表单只会显示大小应为180px或630px的选择框.但是，两种形式之间仍然存在一个小缺陷. 我已经尝试过将两个表单标签写在一行上，并且它们之间没有空格，在这里没有任何变化. (现在对此一无所知，因为考虑到已接受的答案，这应该已经解决了问题，在后来的测试中，它实际上是DID.)那么，是什么原因导致了差距，并且我需要进行哪些更改以消除该差距?

So, I made the content window exactly 1000px and took a look at the other elements. 900px for #nick_msg, 90px for #nick input and button and #msg button and 540px for #msg input, another 90px gap on the right (the black one and another 100px white gap on the outer right). The input and button tags get 10px padding on all sides, so their inner size should be 70px (and 520px for the big one). The form's size is shown as auto x auto, but selecting it only shows a selection box of size 180px or 630px as it should be. But still, there is a small gab between the two forms. I already tried to write both form tags on one line with no spaces in between, no change here. (not sure about this one anymore, because considering the accepted answer, this should have resolved the issue and in a later test I did, it actually DID.) So, what's causing the gap and what do I need to change to get rid of that gap?

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

Browser: Opera 47.0.2631.55 Gentoo/Linux (x86_64)

注意:"#nick"的屏幕截图显示了一个较大的框，该框可以解释差距.当我将第一个</button>和第一个</form>放在同一行上并且之间没有空格时，该框会缩小，但差距仍然存在.

Note: The screenshot for "#nick" shows a bigger box which could explain the gap. As soon as I put first </button> and first </form> on same line with no space between, that box shrinks but the gap remains.

更多屏幕截图:

• 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按钮)

• https://i.stack.imgur.com/3bvGM.png (body - the image inlined above)
• 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 input)
• https://i.stack.imgur.com/z0O1u.png (#nick button)
• https://i.stack.imgur.com/jySAQ.png (#msg)
• https://i.stack.imgur.com/EtMvq.png (#msg input)
• https://i.stack.imgur.com/pUibf.png (#msg button)

推荐答案

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

Set font-size: 0 to your form and see the magic!

好吧，这是由于使用 inline 元素时元素之间的 characteristic 空间-请注意，您已将display: inline赋予了form.

Well, this is due to the characteristic space between elements when using inline elements - note that you have given display: inline to your form.

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

The browser styles for the form elements will override the zero font-size or you can do it yourself using 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>

这篇关于为什么在一种形式的最后一个元素和第二种形式的第一个元素之间出现间隙?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！