代码之家 › 专栏 › 技术社区 › Lion King

使用“float”时会出现不需要的空格

css-float css html

Lion King · 技术社区 · 7 年前

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>

我电脑上的另一个屏幕截图:

2 回复 | 直到 7 年前

Eddie Martinez 7 年前

浮动正在向顶部添加边距。如果您添加 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>

Chava Geldzahler DontAskJosh 7 年前

有一个边缘 1em #codeArea 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>