CSS-マージンボトムが動作しない

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>