我有这个 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”之间出现了间隙，如以下屏幕截图所示：
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)
注意：“#nick”的屏幕截图显示了一个更大的框，可以解释差距。一旦我把它放在第一位</button>首先</form>在同一条线上，之间没有空格，该框缩小，但间隙仍然存在。
更多截图：
-
https://i.stack.imgur.com/3bvGM.png https://i.stack.imgur.com/3bvGM.png（正文 - 上面内嵌的图像）
-
https://i.stack.imgur.com/W0ySx.png https://i.stack.imgur.com/W0ySx.png(#nick_msg)
-
https://i.stack.imgur.com/EaSBt.png https://i.stack.imgur.com/EaSBt.png (#nick)
-
https://i.stack.imgur.com/vErgd.png https://i.stack.imgur.com/vErgd.png（#nick 输入）
-
https://i.stack.imgur.com/z0O1u.png https://i.stack.imgur.com/z0O1u.png（#nick 按钮）
-
https://i.stack.imgur.com/jySAQ.png https://i.stack.imgur.com/jySAQ.png (#msg)
-
https://i.stack.imgur.com/EtMvq.png https://i.stack.imgur.com/EtMvq.png(#msg 输入)
-
https://i.stack.imgur.com/pUibf.png https://i.stack.imgur.com/pUibf.png（#msg 按钮）
Set 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
