CSS HTML align div

Question

I have div tag inside body

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="header">
</div>

</body>
</html>

css:

body{
    background:#787777;
    font-family:"Droid Sans",Helvetica,Arial,Sans-Serif;
    font-size:0.81em;
    }

#header{
    height:100px;
    background:#000000;
    width:100%;
    margin:0px;
    }

and here is result as you see there is spaces left, top and right. How i can remove this spaces? enter image description here

score 3 · Accepted Answer · answered Jan 29 '12 at 17:05

3

body{
    background:#787777;
    font-family:"Droid Sans",Helvetica,Arial,Sans-Serif;
    font-size:0.81em;

    margin: 0;
    padding: 0;
}

answered Jan 29 '12 at 17:05

Zoltan Toth

46,981
12
120
134

Just adding margin:0 to the body selector should do it – Josh Jan 29 '12 at 17:07
Could you please answer http://stackoverflow.com/questions/9943560/html-alignment-issue-in-one-machine-only-both-ie8 ? – LCJ Mar 30 '12 at 13:28

score 2 · Answer 2 · answered Jan 29 '12 at 17:07

You need to remove the margin and padding around the <body> element. Browsers will add one or the other by default, so you need to explicitly set them to 0:

body {
    background:#787777;
    font-family:"Droid Sans",Helvetica,Arial,Sans-Serif;
    font-size:0.81em;
    margin: 0px;
    padding: 0px;
}

Different browsers have different default styles, so setting both padding and margin to 0 ensures you don't get a gap.

CSS HTML align div

2 Answers2