Clever Geek Handbook

When using 'float' unwanted space appears,

When used, float

there is unwanted space on 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>
Run codeHide result


Additional screenshot from my computer:

Why did this space appear and how to solve this problem?

+3


source to share


2 answers


The float adds margin to the top. If you add margin-top:0px

it will remove the space. Your particular situation involves collapsing fields .



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>
Run codeHide result


+2


source


The field #codeArea

applies an attribute 1em

applied by the user agent that creates unwanted space. Install 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>
Run codeHide result


+1


source






More articles:


All Articles