CODEWITHSUNDEEP
htmlcss
jerneva
jerneva

Reputation: 465

CSS- Margin-bottom not working

I am having this very frustrating issue, where margin-bottom will not work, but margin-left and margin-top are working perfectly. I just simply want a gap between the different form fields.

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

It is a very long from so i haven't included all fields, these are the fields giving me a problem.

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;     
}

Upvotes: 1

Views: 763

Answers (1)

Ferrmolina
Ferrmolina

Reputation: 2771

You must to clear your floated elements. See more

This is what you need?

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>

Upvotes: 1

Related Questions