Un espace indésirable apparaît lors de l'utilisation de 'float'

Question

Lorsque vous utilisez float apparaît un espace non désiré sur la première ligne.

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>

Une capture d'écran de mon ordinateur supplémentaire:

Pourquoi cet espace est apparu, et comment résoudre ce problème?

Answer 1

Le flotteur ajoute une marge au sommet. Si vous ajoutez margin-top:0px cela supprimera l'espace. Votre situation particulière a à voir avec 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

Il y a une marge de 1em sur la #codeArea, appliquée par l'agent utilisateur, ce qui crée l'espace non désiré. Définissez margin-top: 0 pour le supprimer.

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>