2

Why does this white border always appear around the box? How can I get it to fit the whole page (horizontally) without using 'position:absolute' ?

http://jsfiddle.net/yag79aLt/

.footer-block {
    height: 250px;
    width: 100%;
    background: #000;
}
<div class="footer-block">
Passerby
  • 9,715
  • 2
  • 33
  • 50
Grant9196
  • 139
  • 7
  • 1
    Because it’s the `margin` or `padding` from the `body` and `html` elements. – Sebastian Simon Aug 09 '15 at 03:12
  • 2
    Possible duplicate of [small margin / gap at the top of document](http://stackoverflow.com/questions/4501007/small-margin-gap-at-the-top-of-document), after a search for “[css] is:a body margin 0”. There’s tons of duplicates like this question. – Sebastian Simon Aug 09 '15 at 03:13
  • I tried searching a while before I posted this and knew someone would have asked it already but I could't find it. thanks anyway – Grant9196 Aug 09 '15 at 03:17
  • Yeah, I posted the search terms, because I already knew the solution. It’s just a note for other people who might want to clean up all the duplicates, etc. – Sebastian Simon Aug 09 '15 at 03:19
  • I have no idea why my duplicate flag got disputed. It is exactly the same problem with exactly the same answers. – Sebastian Simon Aug 09 '15 at 03:36
  • possible duplicate of [Relative positioning at width 100% doesn't make the content go edge to edge](http://stackoverflow.com/questions/26980308/relative-positioning-at-width-100-doesnt-make-the-content-go-edge-to-edge) – emmanuel Aug 09 '15 at 06:26

3 Answers3

3

Add the following to your CSS:

body {
    margin: 0;
}

This will set the page's margin to zero, thus removing the white border around your JSFiddle.

Dez
  • 91
  • 3
0

Often there is a small margin around the body by default. In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides. Some browsers add padding too.

I start by adding this in all of my projects to override that:

body {
    margin: 0;
    padding:0;
}

If you have a large project you could consider using normalize.css. It resets a lot of default values to be consistent across browsers. http://necolas.github.io/normalize.css/

Burkely91
  • 902
  • 9
  • 28
0

You should always make margin and padding 0 of body before design.It will make your design perfect..good luck...:)

CSS CODE:

body {
    margin: 0;
    padding: 0;
}
.footer-block {
    height: 250px;
    width: 100%;
    background: #000;
}
Tanvir Rahman
  • 651
  • 1
  • 11
  • 31