CODEWITHSUNDEEP
htmlcss
Thierry
Thierry

Reputation: 6458

How to remove space from top of web page

I'm following an exercise on Pluralsight, but I'm struggling with a part which appears to work on the video, but doesn't with my code.

I've played around with the CSS and tried it in MS Edge and Google Chrome, but the behaviour is the same, so I must be missing something.

I've added a green border in the #wrapper to highlight the problem. There is still a red border above the "The World" header.

Here is the html5 code (super basic btw!):

	body {
		font-family: sans-serif;
		font-size: 14px;
		margin: 0;
		background-color: red;
	}

	label {
		font-weight: bold;
		display: block;
	}

	input {
		width: 150px;
	}

		/*css selector*/

		input[type=text], input[type=password], textarea {
			width: 150px;
		}

		input[type=submit] {
			width: auto;
		}

	#main {
		background-color: #e9e9e9;
		margin: 0;
	}

	#footer {
		background-color: #222;
		color: #eee;
		padding: 8px 5px;
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.headshot {
		max-width: 50px;
		border: 1px solid #222;
		padding: 3px;
	}

	.menu {
		font-size: 12px;
	}

		.menu li {
			list-style-type: none;
		}

				.menu li.activeitem {
				font-weight: bold;
			}

	#sidebar {
		background-color: #2a2c36;
		color: #eee;
		position: fixed;
		height: 100%;
		width: 250px;
		overflow: hidden;
		left: 0;
	}

	#wrapper {
		margin-left: 250px;
                border: 4px solid green;
	}
	<!DOCTYPE html>
	<html>
	<head>
		<title>The World</title>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="css/site.css" type="text/css" />
	</head>
	<body>
		<div id="sidebar">
			<img src="Images/User1.jpg" alt="headshot"
                             class="headshot" />
			<span>Joe Soap</span>
			<ul class="menu">
				<li class="activeitem"><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>


		<div id="wrapper">
			<div id="main">
				<h2>The World</h2>
				<p>This will be a fun website soon.</p>
				<form>
					<div>
						<label>Date</label>
						<input />
					</div>
					<div>
						<label>Location:</label>
						<input />
					</div>
					<div>
						<input type="submit" value="Add" />
					</div>
				</form>
			</div>
			<div id="footer">
				&copy; 2015 The World Ltd
			</div>
		</div>
	</body>
	</html>

Any insights on how to resolve this problem would be great? Also, while a smaller issue, but is it me or does the main body appears to be 1 or 2 pixels higher than the sidebar?

Thanks

UPDATE-1:

I've resolved the problem but I don't understand why that's solving it.

In the #main definition, if I set the padding to 1px it removes the gap above the 'The World' header. If it is set to 0, it is visible. If it is to 4, it removes it, but I can see the content is being pushed further in.

#main {
    background-color: #e9e9e9;
    margin: 0;
    padding:1px;
}

So can someone explain to me why I have to set this to 1px in order to remove this gap and why is it that when I set to 0, it displays it?

Thanks.

Thierry

Upvotes: 0

Views: 93

Answers (2)

sideroxylon
sideroxylon

Reputation: 4416

Add a CSS rule for <h2> with margin:0 or margin-top:0. This overcomes the default browser settings for the element.

Upvotes: 1

Alon
Alon

Reputation: 11885

The h2 tag gets the style "-webkit-margin-before: 83em" automatically from the browser. You have to reset it explicitly:

-webkit-margin-before: 0

Upvotes: 1

Related Questions