CODEWITHSUNDEEP
htmlcss
Grant9196
Grant9196

Reputation: 139

Why does this border appear?

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">

Upvotes: 2

Views: 55

Answers (3)

Tanvir Rahman
Tanvir Rahman

Reputation: 709

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;
}

Upvotes: 0

Burkely91
Burkely91

Reputation: 902

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/

Upvotes: 0

Dez
Dez

Reputation: 91

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.

Upvotes: 3

Related Questions