Как избавиться от синевы - PullRequest
0 голосов
/ 06 апреля 2019

Проще: как избавиться от светло-синего промежутка, чтобы разделы «Новое приложение для учетной записи клиента» и «Имя / Улица / Город» примыкали?

Как я начинающий, любые другие предложения к моемукод приветствуется.Извините, что добавил этот абзац.

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

Ответы [ 2 ]

2 голосов
/ 06 апреля 2019

Пожалуйста, добавьте новый класс.

h1 {
    margin: 0;
}
1 голос
/ 06 апреля 2019

В то время как решение, представленное @Shoaib, достигнет желаемого эффекта, основная проблема заключается в том, что есть некоторые некорректные HTML и CSS.Чтобы исправить это, валидатор W3 является бесценным инструментом: https://validator.w3.org/.

Что касается вашей текущей проблемы, он указывает, что тег h1 не закрыт из-за отсутствующей обратной косой черты, приводящей кзакрывающий тег интерпретируется как еще один h1 открывающий тег.Это в сочетании с неверным none вместо 0 для margin приводит к тому, что заголовок и форма имеют верхнее и нижнее поле, создавая синий пробел.

Что касается других советов, форматирование вашей формы (позиционирование метки) может быть улучшено с помощью CSS.Назначьте поля ввода и метки равной ширине, и они будут лучше выровнены.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...