CODEWITHSUNDEEP
htmlcss
user2522055
user2522055

Reputation: 159

Spacing between html form input items

For some reason the form I created has a lot of space between each input type. I tried doing form{ padding: 0px; margin: 0px; border: none; } but that did not work. I am not sure how to quite solve this issue if anyone can help. I added a JSFiddle to show everyone what I am talking about. Thank you for the help in advance.

http://jsfiddle.net/dyZ8B/

HTML Code: 

<body>

  <div class="header">Our Really Cool Banking App</div>

  <div id="leftcolumn"> 
      <!-- Creating Buttons here -->
      <div id="nav">
        <ul>
          <li><a href="banking.php">Home</a></li>
          <li><a href="checking.php">Checking</a></li>
          <li><a href="savings.php">Savings</a></li>
          <li><a href="createaccount.php">Create Account</a></li>
          <li><a href="createloan.php">Create Loan</a></li>
        </ul>
      </div>
  </div>

  <div id="checking" class="toggle" style="display:none">show the stuff1</div> 
  <div id="savings" class="toggle" style="display:none">show the stuff2</div>
  <div id="createaccount" class="toggle" style="display:none">show the stuff3</div>
  <div id="createloan" class="toggle" style="display:none">show the stuff3</div>

<div class="inputBox">
  <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
    Username: <input type="text" name="username"><br>
    Amount: <input type="text" name="amount"><br>
    Type: <input type="radio" name="accounttype" value="Checking">Checking
    <input type="radio" name="accounttype" value="Savings">Savings<br>
    Action: <input type="radio" name="bankaction" value="Deposit">Deposit
    <input type="radio" name="bankaction" value="Withdraw">Withdraw<br>
    <input type="submit" value="Submit">
  </form>
</div>

<?php
  //To Test
  var_dump($_POST);
?>

</body>

CSS Code:

.header {
  position: relative;
  width: 1265px;
  line-height:68px;
  background: -moz-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);

  /* styles under are just for fun */
  border-radius: 5px 5px 0 0;
  text-indent: 20px;
  text-transform: uppercase;
  font-family: arial;
  font-weight: bold;
  color: white;
}

/* making backgrounds compatible */  
.header {
  background: rgba(20,82,159,1);
  background: -moz-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(20,82,159,1)), color-stop(100%, rgba(0,119,230,1)));
  background: -webkit-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
  background: -o-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
  background: -ms-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
  background: linear-gradient(to bottom, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14529f', endColorstr='#0077e6', GradientType=0 );
}

#leftcolumn{
  float: left;
  width: 200px; /*Width of left column*/
  height: 650px;
  margin-top: -16px;
  background: -moz-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
  color: white;
}

#leftcolumn {
  background: rgba(20,82,159,1);
  background: -moz-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(20,82,159,1)), color-stop(100%, rgba(0,119,230,1)));
  background: -webkit-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
  background: -o-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
  background: -ms-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
  background: linear-gradient(to bottom, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14529f', endColorstr='#0077e6', GradientType=0 );
}

#nav {
  color: white;
}

#nav ul {
  padding-top: 40px;
  padding-left: 15px;
}

#nav ul li { 
  list-style-type: none;
  text-decoration: none;
  font-size: 18px;
  font-family: Verdana;
  margin: 0px 0 40px 0;
}

a:link    {color:white;}
a:visited {color:white;}
a:active  {color:white;}
a:hover   {color:rgb(152,152,152);}

.inputBox {
  position: relative;
  width: 500px;
  line-height:100px;
  margin-top: 25px;
  margin-left: 450px;
  padding-bottom: 10px;

  /* styles under are just for fun */
  border-radius: 5px 5px 0 0;
  text-indent: 20px;
  text-transform: uppercase;
  font-family: arial;
  font-weight: none;
  font-size:12px;
  color: white;
  text-align: center;
}

form{
  padding: 0px;
  margin: 0px;
  border: none;
}

.inputBox {
  background: rgba(20,82,159,1);
  background: -moz-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(20,82,159,1)), color-stop(100%, rgba(0,119,230,1)));
  background: -webkit-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
  background: -o-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
  background: -ms-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
  background: linear-gradient(to bottom, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14529f', endColorstr='#0077e6', GradientType=0 );
}

Upvotes: 0

Views: 96

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241198

It's because of the line-height set on the .inputBox elements.

Updated Example Here

.inputBox {
  position: relative;
  width: 500px;
  line-height:100px; /* Remove or reduce this value */
}

Upvotes: 1

Related Questions