Jak przesunąć napis 'Nazwa użytkownika:' w dół wraz z pozostałymi polami do wypełniania?

Question

Witam.

Podczas tworzenia rejestracji na stronie chciałbym ulokować niezbędne pola do wypełnienia typu: 'Nazwa użytkownika', 'Adres e-mail' oraz 'Hasło'. Problem polega na tym, że nie mogę przesunąć w dół napisu: Nazwa użytkownika: wraz z pozostałymi polami do wypełnienia. Próbowałem stosować margines górny jako margin-top albo margines wewnętrzny jako padding, ale niestety nie przyniosło to żadnego efektu.

Aktualnie wygląda to tak:

http://imageshack.com/a/img924/4233/THtXMs.jpg

Co muszę poprawić w kodzie, aby napis 'Nazwa użytkownika:' przesunął się w dół wraz z pozostałymi polami do wypełniania?

<div id="header">
	<div class="text">
		<span>Rejestracja nowego użytkownika</span>
	</div>
</div>
		
<div id="content">
		
	<form action="rejestracja.php" method="POST">
		<label for="username">Nazwa użytkownika:</label>
		<label for="email">Adres e-mail:</label>
		<label for="password">Hasło:</label>
	</form>
			
</div>

#content
{
	background-color: #696969;
	border: 1px solid #C0C0C0;
	width: 740px;
	height: 450px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

label
{
	display: block;
	padding: 5px;
	position: relative;
	left: 222px;
}

#username
{
	display: block;
	width: 270px;
	padding: 6px;
	margin-bottom: 40px;
	position: relative;
	left: 222px;
}

#email
{
	display: block;
	width: 270px;
	padding: 6px;
	margin-bottom: 40px;
	position: relative;
	left: 222px;
}

#password
{
	display: block;
	width: 270px;
	padding: 6px;
	margin-bottom: 40px;
	position: relative;
	left: 222px;
}

 

Answer 1

Strzelam:

form
{
display: block;
margin-top: 20px;
}

ewentualnie

#content
{
padding-bottom: 20px;
}

 

Comments

Zamierzony efekt przyniósł zapis:

form
{
	display: block;
	margin-top: 20px;
}

Ten drugi nie przyniósł żadnego efektu.

Dzięki za pomoc.

---

Ten drugi nie działa bo się pomyliłem. Zamiast padding-bottom powinien być passing-top :D

Answer 2

Dodać padding do #content

Comments

Dodałem padding: 20px do #content i co prawda napis przesunął się w dół, ale szerokość i wysokość contenta powiększyła się o te 20px. Zatem to nie jest najlepsze rozwiązanie.

Mimo to, dzięki za próbę pomocy.

---

Przyzwyczajony jestem do pracy z 

* {
    box-sizing: border-box;
}

border-box rozwiązuje ten problem

---

OK, wezmę to pod uwagę. Dzięki.