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

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将其删除。

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>