CSS-Margin-bottom not working

Question

У меня возникает эта очень неприятная проблема, когда край поля не работает, но маржа-левая и крайняя марка работают отлично. Я просто хочу разрыв между различными полями формы.

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"> 

Это очень долго из так я не включил все поля, эти поля дает мне проблему.

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

Вы должны очистить свои плавали элементы. See more

Это то, что вам нужно?

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>