使用'float'时出现不需要的空间

Question

使用float时，第一行会出现不需要的空格。

div#showCode_container {
  float: left;
  font: bold 14px arial;
}

#editor {
  width: 500px;
  min-height: 400px;
  color: #fff;
  background-color: mediumblue;
}

#lineNumber {
  min-height: 400px;
  padding: 0 5px;
  float: left;
  color: #333;
  background-color: #ff9000;
}

#codeArea {
  min-height: 500px;
  float: left;
}

#codeArea:after {
  clear: both;
}

<div id="showCode_container">
  <h3> Show the code: </h3>
  <div id="editor">
    <div id="lineNumber">1<br/>2<br/>3</div>
    <pre id="codeArea">A text</pre>
  </div>
</div>

我计算机的其他屏幕截图：

为什么会出现这个空间，以及如何解决这个问题？

Answer 1

浮动正在向顶部添加边距。如果您添加margin-top:0px，则会删除空格。您的具体情况与collapsing margins有关。

div#showCode_container {
  float: left;
  font: bold 14px arial;
}

#editor {
  width: 500px;
  min-height: 400px;
  color: #fff;
  background-color: mediumblue;
}

#lineNumber {
  min-height: 400px;
  padding: 0 5px;
  float: left;
  color: #333;
  background-color: #ff9000;
}

#codeArea {
  min-height: 500px;
  float: left;
margin-top:0px;
}

#codeArea:after {
  clear: both;
}

<div id="showCode_container">
  <h3> Show the code: </h3>
  <div id="editor">
    <div id="lineNumber">1<br/>2<br/>3</div>
    <pre id="codeArea">A text</pre>
  </div>
</div>

Answer 2

用户代理应用的1em上有#codeArea的余量，这会产生不需要的空间。设置margin-top: 0即可将其删除。

＆＃13;

＆＃13;

div#showCode_container {
  float: left;
  font: bold 14px arial;
}

#editor {
  width: 500px;
  min-height: 400px;
  color: #fff;
  background-color: mediumblue;
}

#lineNumber {
  min-height: 400px;
  padding: 0 5px;
  float: left;
  color: #333;
  background-color: #ff9000;
}

#codeArea {
  min-height: 500px;
  float: left;
  margin-top: 0;
}

#codeArea:after {
  clear: both;
}

＆＃13;

<div id="showCode_container">
  <h3> Show the code: </h3>
  <div id="editor">
    <div id="lineNumber">1<br/>2<br/>3</div>
    <pre id="codeArea">A text</pre>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;