1

I'm new to CSS. I've got a deceptively simple problem. This is a fiddle of a simple page. http://liveweave.com/c6j68I

The objective is to show a fixed 900px white div centered against a coral background.

I've tried to achieve this using two divs maked #outerWrapper and #wrapper.

However, the whole page still seems to have a white background, which seems to be connected to the body tag. (Please use the fullscreen mode to see it).

If I give the body the background color of the #outerWrapper, again, the color appears on the top and bottom of the page too, which is undesired. (Please uncomment the CSS of body to see this.)

I've tried using the article tag; using negative margins; and changing dimesions of the body tag. Nothing seems to work.

In simple terms, a want a 'columned' look: coral-white-coral; instead of the 'boxed' look I currently have.

Please help.

Snowman
  • 2,465
  • 6
  • 21
  • 32
  • Open the DevTools (press F12) and inspect the body element. By default, it has `body { margin: 8px; }` applied to it. You should overwrite that. – akinuri Aug 12 '16 at 10:55
  • @akinuri: Thank you. It solves the 'side' problem; but I'm still getting a margin on the top. – Snowman Aug 12 '16 at 11:15
  • Possible duplicate of [Removing body margin in CSS](http://stackoverflow.com/questions/30208335/removing-body-margin-in-css) – Rob Aug 12 '16 at 11:21

4 Answers4

2

Just add a style for the body in your CSS and set the margin to 0px, like so:

body {
    margin: 0px;
}
Mike Stringfellow
  • 489
  • 3
  • 4
  • Accepting because you answered the earliest. Btw, it fixed the problem partially. The top margin was still there. Found out it was coming from `h2` and set it to 0. Thanks for your help. – Snowman Aug 12 '16 at 11:20
  • Actually thepio answered 7 seconds before I did. As much as I appreciate the reputation, I would be remiss if I didn't point this out. – Mike Stringfellow Aug 12 '16 at 11:24
2

Because most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.

If you want to change it, you can just do this, add it on your css

* {
  padding:0;
  margin:0;
}

Want to be more complete?

use normalize.css. It resets a lot of default values to be consistent across browsers.

Fiido93
  • 1,918
  • 1
  • 15
  • 22
1

Body has default margins set by the browser (most browsers set default styles to different elements and they can vary depending on the browser) as seen below in developer console.

Note: In most browsers you can open the developer console by pressing F12 on your keyboard:

enter image description here

Just set the following css to avoid it:

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

Demo: http://liveweave.com/EzWH0o

thepio
  • 6,193
  • 5
  • 35
  • 54
1

Try adding the following

<style>
   body,html {height:100vh; width:100vw; padding:0; margin:0;}
</style>
Ed Sanford
  • 66
  • 4