使用 'float' 时出现不需要的 space

Question

当使用 float 时，第一行出现不需要的 space。

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>

我的电脑的另一个屏幕截图：

为什么会出现space，如何解决这个问题？

Answer 1

浮动正在向顶部添加边距。如果您添加 margin-top:0px，它将删除 space。您的具体情况与 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

#codeArea 上有 1em 的边距，由用户代理应用，这会创建不需要的 space。设置 margin-top: 0 将其删除。

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;
}

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

使用 'float' 时出现不需要的 space

There's an undesired space appears when using 'float'

html

css

css-float