html css margin(white spaces at webpage edges)

Question

Basically I got problem with the edge of my website, it got this white spaces :

http://sadpanda.us/images/1885204-15X1WA4.jpg

While I want that web to look like this :

http://sadpanda.us/images/1885205-VG8KJ23.jpg

no white spaces.

Any idea where I've done wrong?

You're probably not using a reset stylesheet. Be aware, that browsers will use their own default styles for various elements, like `` for example - http://meyerweb.com/eric/tools/css/reset/ it's usually a good idea to use something like reset.css or normalize to start with a consistent baseline. — Nick R, Feb 11 '14 at 15:07

score 3 · Accepted Answer · edited Feb 11 '14 at 15:17

3

That looks very much like the default margin on the <body>.

body {
  margin: 0;
}

Should solve it for you.

Quick Demo:

CSS:

html, body {
    height: 100%;
}
div {
    width: 100%;
    height: 100%;
    background: #ddd;
}

DEMO WITH SPACE

CSS:

html, body {
    height: 100%;
}
body {
    margin: 0; /* This will stop the margin, setting it to 0 */
}
div {
    width: 100%;
    height: 100%;
    background: #ddd;
}

DEMO WITHOUT SPACE

edited Feb 11 '14 at 15:17

Ruddy

9,795
5
45
66

answered Feb 11 '14 at 15:08

Nils Kaspersson

8,816
3
29
30

Added onto your answer, hope you don't mind. Just added a demo. – Ruddy Feb 11 '14 at 15:17

score 0 · Answer 2 · edited Feb 12 '16 at 04:10

0

each browser has some style for elements like body,h1...etc,that is called as user agent style sheet, they have some margin, if you want reset all css just use universal tag and put margin:0 ... like below..

*{ margin: 0;}

edited Feb 12 '16 at 04:10

wendy

161
3
14

answered Feb 11 '14 at 15:17

Senthilkumar Govindasamy

145
9

html css margin(white spaces at webpage edges)

2 Answers2

Quick Demo:

Linked