Problem z header

0

Witam
Stworzyłem sobie szablon w html5, mam taki problem ze jak w header wpisze tekst w znacznikach to robia sie duże odstępy od góry i dołu, a jeżeli tekst jest bez znaczników wszystko jest ok. Nie mam pojęcia czego to może być wina.

user image
user image

 <!doctype html>
<html>
	<head>
		<title>WebSite</title>
		<link rel="Stylesheet" href="styles/page_template.css" />
		<link rel="Stylesheet" href="styles/header.css" />
		<link rel="Stylesheet" href="styles/menu_horizontal.css" />
		<link rel="Stylesheet" href="styles/menu_vertical.css" />
		<link rel="Stylesheet" href="styles/contents.css" />
		<link rel="Stylesheet" href="styles/footer.css" />
	</head>
	<body>
		<div id="TOP">
		
			<header id="HEADER">
				<h1>Lorem Ipsum</h1>
			</header>
			
			<nav id="MENU_VERTICAL">
				MENU
			</nav>
			
			<article id="CONTENTS">
			Treść strony
			</article>
			
			<footer id="FOOTER">
				Stopka serwisu
			</footer>
			
		</div>
	</body>
</html>

 html, body {
	margin: 0;
	padding: 0;
	text-align: center;
	/*-----*/
	background-color: #DFDFD0;
	color: #000;
}

#TOP {
	width: 1004px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	/*-----*/
	background-color: #fff;
}

#HEADER {
	background-color: #C0C060;
	font-size: 30px;
}

#MENU_VERTICAL{
	width: 150px;
	float: left;
	overflow: hidden;
	/*-----*/
	background-color: #F0F090;
}

#CONTENTS {
	width: 854px;
	float: left;
	overflow: hidden;
	/*-----*/
	background-color: #FFFFD0;
	min-height: 700px;
}

#FOOTER {
	clear: both;
	width: 100%;
	/*-----*/
	background-color: #C0C060;
	text-align: center;
}
1
  1. Spacja przed doctype to tylko na forum czy w kodzie też tak masz? Skutecznie przełączy do quirks-mode, które wpływa na wygląd elementów
  2. Używaj narzędzi deweloperskich. Dwa kliki i wiadomo o co chodzi: http://i.imgur.com/agH48c1.jpg
  3. Google: CSS Reset. Przeglądarki posiadają domyślne style dla elementów (co widać na powyższym screenshocie).
0

W ogolę nie przypuszczałem że może być coś takiego jak css reset, przeszukałem ich kilka, dziwne że ten na licencji MIT nie rozwiązał mojego problemu, dopiero http://perfectionorvanity.tumblr.com/reset.html wszystko załatwił.

1 użytkowników online, w tym zalogowanych: 0, gości: 1