html表单输入框间距,html表单输入项之间的间距
出于某种原因，我创建的表单在每种输入类型之间都有很大的空间。我试着做的形式{padding：0px; margin：0px; border：none; }但没有奏效。如果有人能帮忙，我不确定如何解决这个问题。我添加了一个JSFiddle来向大家展示我正在谈论的内容。感谢您提前的帮助。html表单输入项之间的间距
HTML代码：
Username:
Amount:
Type: Checking
Savings
Action: Deposit
Withdraw
//To Test
var_dump($_POST);
?>
CSS代码：
.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);
}