How come this code is leaving a margin at the top of the page in FF and Chrome

HTML & CSS
1 

body {
	background-color: #ced0cc;
	margin-top: 0px;
}

header {
	margin: 0% 5% 0% 5%;
	background-color: #000;
	height: 50px;
	width: 90%;
}

HTML not a lot of it


<html>
	<head>
		<title>Test</title>
		<link rel="stylesheet" type="text/css" href="./css/main.css" />
	</head>
	<body>
		<header>
			<h1>Main Heading</h1>
		</header>

	</body>
</html>

there’s about a 20px gap at the top of the page which I can’t seem to get rid of.

2

Read up on “collapsing margins”.

You need to add this:

h1 {margin-top: 0;}
3

Thanks Ralph, that’s some weird behaviour, spot on answer.

Learning css & html formally so am using a bunch of stuff I haven’t seen before.