CSS-Margin-bottom funktioniert nicht

Question

Ich habe dieses sehr frustrierende Problem, wo Margin-Bottom nicht funktioniert, aber Margin-Left und Margin-Top funktionieren perfekt. Ich will nur eine Lücke zwischen den verschiedenen Formularfeldern.

HTML

<input type="text" name="address2" id="address2" value="<?php echo $_SESSION['address2']; ?>" placeholder="Address Line 2" tabindex="5"> 
<br> 

<input type="text" name="city" id="city" value="<?php echo $_SESSION['city']; ?>"placeholder="Town/City" tabindex="6"> 
<br> 
<input type="text" name="pcode" id="pcode" value="<?php echo $_SESSION['pcode']; ?>" placeholder="Postcode" tabindex="7"> 

Es ist sehr lange aus, so habe ich alle Felder nicht enthalten, das sind die Felder mir ein Problem zu geben.

CSS

input#address2{ 
border: 1px solid #6d6e70; 
border-radius: 5px; 
width: 43%; 
height: 33px; 
display: inline-block; 
line-height: 33px; 
float: left; 
position: relative; 
margin-bottom: 10px; 
} 

input#city{ 
border: 1px solid #6d6e70; 
border-radius: 5px; 
width: 43%; 
height: 33px; 

line-height: 33px; 
float: left; 
margin-left: -431px; 
position: relative; 
margin-top: 10px; 
} 

input#pcode{ 
border: 1px solid #6d6e70; 
border-radius: 5px; 
width: 20%; 
height: 33px; 
line-height: 33px; 
float: left; 
margin-left: -431px; 
position: relative; 
margin-top: 10px;  
} 

Answer 1

Sie müssen Ihre Floats löschen. See more

Das ist was Sie brauchen?

input#address2{ 
 
    border: 1px solid #6d6e70; 
 
    border-radius: 5px; 
 
    width: 43%; 
 
    height: 33px; 
 
    display: inline-block; 
 
    line-height: 33px; 
 
    float: left; 
 
    position: relative; 
 
    margin-bottom: 10px; 
 
} 
 

 
input#city{ 
 
    border: 1px solid #6d6e70; 
 
    border-radius: 5px; 
 
    width: 43%; 
 
    height: 33px; 
 
    line-height: 33px; 
 
    float: left; 
 
    position: relative; 
 
    margin-top: 10px; 
 
} 
 

 
input#pcode{ 
 
    border: 1px solid #6d6e70; 
 
    border-radius: 5px; 
 
    width: 20%; 
 
    height: 33px; 
 
    line-height: 33px; 
 
    float: left; 
 
    position: relative; 
 
    margin-top: 10px;  
 
} 
 
.clr { 
 
    clear: both; 
 
}

<input type="text" name="address2" id="address2" value="<?php echo $_SESSION['address2']; ?>" placeholder="Address Line 2" tabindex="5"> 
 
<div class="clr"></div> 
 
<input type="text" name="city" id="city" value="<?php echo $_SESSION['city']; ?>"placeholder="Town/City" tabindex="6"> 
 
<div class="clr"></div> 
 
<input type="text" name="pcode" id="pcode" value="<?php echo $_SESSION['pcode']; ?>" placeholder="Postcode" tabindex="7"> 
 
<div class="clr"></div>