使用'浮動'時出現不需要的空間

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>