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

Question

When using float appears an undesired space at the first line.
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>
An additional screenshot from my computer:
Why that space appeared, and how to resolve that problem?

Answer 1

The float is adding a margin to the top. If you add margin-top:0px it will remove the space. Your particular situation has to do with 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

There's a margin of 1em on the #codeArea, applied by the user-agent, which creates the undesired space. Set margin-top: 0 to remove it.
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>