Question

简单地说：如何消除浅蓝色的空白，以使“新客户帐户申请”和“名称/街道/城市”部分相邻？

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

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

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

Answer 1

请添加一个新的班级。

h1 {
    margin: 0;
}

Answer 2

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

关于您当前的问题，它指出h1标签由于缺少反斜杠而没有关闭，导致关闭标签被解释为另一个h1开头标签。这与无效的none而不是0的{{1}}一起导致标题和表格的顶部和底部都有边距，从而产生了蓝色的空白。

关于其他技巧，也可以通过CSS来改善表单格式（标签定位）。为输入字段和标签分配相等的宽度，它们会更好地对齐。

如何摆脱浅蓝色的缝隙

2 个答案: