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

问题

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>

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

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?

Browser: Opera 47.0.2631.55 Gentoo/Linux (x86_64)

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.

Further screenshots:

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)

回答1:

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

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

The browser styles for the form elements will override the zero font-size or you can do it yourself using font-size: initial.

See demo below:

* {
  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>

回答2:

I've copied the code here and I think (but I'm not sure), if you're talking about the black little vertical line, you have to add the font-size: 0; to form styling.

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

Try and tell us

回答3:

you might want to add change your the add a margin property in the CSS for your form.

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

That should get rid of the space between the forms on the left and right (since your forms are on the same line). Hope this helps :)

来源：https://stackoverflow.com/questions/45903586/why-do-i-get-a-gap-between-last-element-in-one-form-and-first-element-in-second

标签

html

css

opera

display