user5914666
user5914666

Reputation: 11

Unwanted space above <body>, and no background-color.

Pretty noob question I'm sure. I ran into this problem when attempting to change the background color in a more complex webpage, so I started from scratch and still can't figure it out. Here's the simplified page

My goal is to set the background color of the site, but doing so with body had no effect, even when I had it filled with content. So I tried setting the background color and instead ran into a whole new problem. The header is not at the top of the site, since there's an unwanted space above the body element itself. I've tried setting everything to margin 0 and padding 0 to no effect. Here is my code:

html {
	background-color: green;
}

.body {
	
	padding: 0;
	margin: 0;

}

#logo {
	font-size: 2rem;
	border-right: 1px solid grey;
	color: green;
}

header {
	border-bottom: 1px solid grey;
	background-color: white;
}
<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <link rel="stylesheet" href="css/style.css">
  <meta name="description" content="blah">
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  
  <header>
  	
  	<p id="logo">Path</p>
  
  </header>

  <section class="hero">
    
  </section>

  <section class="content">
    <p>hi</p>

  </section>



</body>
</html>

Upvotes: 1

Views: 86

Answers (4)

sam
sam

Reputation: 137

Use

html,body{
    padding:0;
    margin:0;
}

Upvotes: 0

DikaDikz
DikaDikz

Reputation: 102

Try add This in your CSS:

html,body,header,section,p{
    padding:0;
    margin:0;
    border:0;
}

it Works, No unwanted space.

here the fiddle :https://jsfiddle.net/osrrwrqn/

Upvotes: 0

abhinsit
abhinsit

Reputation: 3272

Try :

#logo {
margin-top: 0px ;
}

body {
 padding: 0px;
 margin: 0px;
}

Upvotes: 0

conk
conk

Reputation: 87

have you tried "body" instead of ".body"?

Upvotes: 1

Related Questions