为什么内部 div 是从这个 CSS 中的父 div 出来的？

如何解决为什么内部 div 是从这个 CSS 中的父 div 出来的？

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>

结果：

请解释为什么会出现内部矩形以及如何防止它？

解决方法

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

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

我已经尝试了可以正常工作的更改。

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>

  #content{
    overflow:hidden;
    }
#messages{
line-height:50%;
}

#message div 太大。
父 div 的默认 overflow 属性显然设置为 visible。

现在，至于如何修复它，这取决于您要尝试做什么。但这是两个促成因素。

您确定您的代码正确吗？ css 中的 id 与 html 文件中的任何 id 都不匹配。