如何摆脱浅蓝色的缝隙



简单地说:如何摆脱浅蓝色的鸿沟,让"新客户账户申请"和名称/街道/城市部分相邻?

由于我是初学者,欢迎对我的代码提出任何其他建议,谢谢。

我不能在不添加更多信息的情况下提交这个,因为它说代码太多,没有足够的写作。很抱歉添加此段。

<!DOCTYPE html>
<html>
<head>
<style>
#wrap { 
    background-color: #83caff;
	width: 1024px; 
	margin: 0 auto; 
	color: white;
}
.darkblue{
	background-color: #004586;
	padding-left: 20px;
	line-height: none;
	margin: none;
}
.paddingleftstandard {
	padding-left: 20px;
	padding-bottom: 10px;
}
.paddingrightstandard {
	padding-right: 20px;
	margin-right: 20px;
}
.darkbluefordata{
	background-color: #336699;
    line-height: 1.8em;
	font-size:0.6em;
	
}
.submitbutton {
	padding: 4px 6px 4px !important;
	font-size: 18px !important;
	background-color: #3b5998;
	font-weight: bold;
	text-shadow: 1px 1px #3b5998;
	color: #ffffff;
	border-radius: 3px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 1px solid #3b5998;
	cursor: pointer;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
</style>
</head>
<body>
<div id="wrap">
	<h1 class="darkblue">New Customer Account Application<h1>
	
	<form class="paddingleftstandard darkbluefordata" action="/action_page.php">
  Name &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  Street &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  
  City
  <br>
  <input type="text" name="Name" value="">
  <input type="text" name="Street" value="">
  <input class="paddingrightstandard" type="text" name="City" value="">
  <input class="submitbutton" type="submit" value="Submit Application">
</form> 
	
	<p> </p>
	<footer>
</footer>
</div>
</body>
</html>

请添加一个新类。

h1 {
    margin: 0;
}

虽然@Shoaib提出的解决方案将达到预期的效果,但根本问题是存在一些不正确的HTML和CSS。为了解决这个问题,W3验证器是一个非常宝贵的工具:https://validator.w3.org/。

关于您当前的问题,它指出由于缺少反斜杠,h1标签未关闭,导致结束标签被解释为另一个h1开始标签。这与无效的none而不是0 margin相结合,导致标题和表单都具有上边距和下边距,从而产生蓝色间隙。

至于其他提示,也可以通过CSS来改进表单格式(标签定位(。为输入字段和标签分配相等的宽度,它们会更好地排列。

最新更新