为什么在这个CSS中内部div要从父div中跳出来？[副本]

Question

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: "#00b7ff"
}

#content {
  background-color: aquamarine;
  width: 800px;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid blueviolet;
}

#room {
  background-color: burlywood;
  margin-bottom: 1em;
}

#messages {
  width: 690px;
  height: 300px;
  overflow: scroll;
  background-color: cadetblue;
  margin-bottom: 1em;
  margin-right: 10px;
  border: 2px solid blue;
}

<div id='content'>
  <div id='room'></div>
  <div id='room-list'></div>
  <div id='messages'></div>

  <form id='send-form'>
    <input id='send-messsage' />
    <input type=s ubmit id='send-button' value='Send' />

    <div id='help'>
      Chat commands:
      <ul>
        <li>Change nickname: <code>/nick [username]</code> </li>
        <li>Join/create room: <code>/join [room name]</code> </li>
      </ul>
    </div>

  </form>

</div>

结果：

请解释为什么内矩形出来了，可以做什么来防止它？

Answer 1

我相信这可能会有所帮助：

如果我们将#message的高度降低到282px，它将正确地对齐。因为上面的div是#room是1em=16px，而#content是2px边框。所以总共18px是从父div出来的。

我已经试过这些变化了，它运行得很好。

css lang-css prettyprint-override">body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: "#00b7ff"
}

#content {
  background-color: aquamarine;
  width: 800px;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid blueviolet;
}

#room {
  background-color: blurrywood;
  margin-bottom: 1em;
}

#messages {
  width: 690px;
  height: 282px;
  overflow: scroll;
  background-color: cadetblue;
  margin-bottom: 1em;
  margin-right: 10px;
  border: 2px solid blue;
}

<div id='content'>
  <div id='room'></div>
  <div id='room-list'></div>
  <div id='messages'></div>

  <form id='send-form'>
    <input id='send-messsage' />
    <input type=s ubmit id='send-button' value='Send' />

    <div id='help'>
      Chat commands:
      <ul>
        <li>Change nickname: <code>/nick [username]</code> </li>
        <li>Join/create room: <code>/join [room name]</code> </li>
      </ul>
    </div>

  </form>

</div>