CSS: How to remove the space around?

Question

How can I remove the empty space above and at the left of the "welcome" box?

#.page{
 background-color: #920000;
 margin: 0;
 padding: 0;
}
.heading{
 background-color: #666666;
 padding: 0;
 margin: 0;
 border: 0;
}
h1{
 margin: 0;
 padding: 0;
}

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset = "utf-8"/>
  <link rel= "stylesheet" href = "style.css" />
 </head>
 <body background-color = #920000;>
  <div class = "heading">
   <h1>"welcome"</h1>
  </div>
 </body>
 <nav>
  <ul>
   <li>Home</>
  </ul>
 </nav>
</html>

Thank You.

Regards, Micky.

This selector `#.page` is probably not valid...either `#page` or `.page`...one or the other. You HTML structure is invalid too, as commented above. — Paulie_D, May 07 '15 at 12:57
@HashemQolami: around _Welcome_ is no `UL`. If so, any browsers use to indentation of lists left padding instead of margin. — pavel, May 07 '15 at 12:58
@panther If you look through the code carefully, there's an `
` element within the `
` causing margin collapsing because of the default margin at the top and bottom of list elements. — Hashem Qolami, May 07 '15 at 13:01
@HashemQolami: I see that, but the OP wanted to remove white space around grey Welcome text. And if you reset (left) margin on `UL`, you should null the left padding too. — pavel, May 07 '15 at 13:03
@panther Isn't the `
` *around* the Welcome text? It *does* add a white space under the Welcome text and I'm just pointing it out. Besides, reseting padding of `
` is not the case here. I'm not talking about left/right margins, as I mentioned it before, UAs apply a top/bottom margin to the list elements such as UL, LI. — Hashem Qolami, May 07 '15 at 13:09

score 4 · Accepted Answer · answered May 07 '15 at 12:55

4

It's 8px default margin on body.

body {margin: 0;}

answered May 07 '15 at 12:55

pavel

26,538
10
45
61

In IE6 & IE7 this is the default margin for body `margin: 15px 10px;` – Emanuel Vintilă May 07 '15 at 12:59
@Psioniax: maybe, but IE7 and lower are dead. `margin: 0;` override both, `8px` and `15px 10px` :-) – pavel May 07 '15 at 13:02

Luís P. A. · Answer 2 · 2015-05-07T12:57:33.847

1

Set bodyand htmlto margin:0and padding:0

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

#.page{
 background-color: #920000;
 margin: 0;
 padding: 0;
}
.heading{
 background-color: #666666;
 padding: 0;
 margin: 0;
 border: 0;
}
h1{
 margin: 0;
 padding: 0;
}

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset = "utf-8"/>
  <link rel= "stylesheet" href = "style.css" />
 </head>
 <body background-color = #920000;>
  <div class = "heading">
   <h1>"welcome"</h1>
  </div>
 </body>
 <nav>
  <ul>
   <li>Home</>
  </ul>
 </nav>
</html>

edited May 07 '15 at 12:57

answered May 07 '15 at 12:56

Luís P. A.

9,524
2
23
36

1

Why you set `padding: 0;` to `body`, when it's default value? – pavel May 07 '15 at 12:57
@panther - Read this: http://stackoverflow.com/questions/13127887/html-default-body-margin – Luís P. A. May 07 '15 at 12:58

score 0 · Answer 3 · answered May 07 '15 at 12:56

*{margin:0; padding:0;}
#.page{
    background-color: #920000;
    margin: 0;
    padding: 0;
}
.heading{
    background-color: #666666;
    padding: 0;
    margin: 0;
    border: 0;
}
h1{
    margin: 0;
    padding: 0;
}

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset = "utf-8"/>
        <link rel= "stylesheet" href = "style.css" />
    </head>
    <body background-color = #920000;>
        <div class = "heading">
            <h1>"welcome"</h1>
        </div>
    </body>
    <nav>
        <ul>
            <li>Home</>
        </ul>
    </nav>
</html>

score 0 · Answer 4 · answered May 07 '15 at 12:56

0

To reset all padding and margin just do *{padding: 0; margin:0;}

answered May 07 '15 at 12:56

Radonirina Maminiaina

6,958
4
33
60

score 0 · Answer 5 · answered May 07 '15 at 12:58

0

You need to remove default body margin :

body {
        margin: 0;
    }

answered May 07 '15 at 12:58

Ankit

1,471
17
29

score 0 · Answer 6 · answered May 07 '15 at 13:00

(Ansewering because I don't have enough reputation to comment previous answer.)

It's indeed body default browser padding.

Note that you can avoid some or every default browser behaviours by using some CSS-reset sheets.

I personnally love Normalize as a good reset base. Others exist.

The general goal behind CSS resets is to make sure every browser custom rule won't break your design depending on the browser your user use.

Hope I could help.

score 0 · Answer 7 · answered May 07 '15 at 13:22

#.page is wrong selector also i did not get you why are you placing nav outside the body? and also i'm getting porper output as you want without changing your code.

#.page{
  background-color: #920000;
  margin: 0;
  padding: 0;
}
.heading{
  background-color: #666666;
  padding: 0;
  margin: 0;
  border: 0;
}
h1{
  margin: 0;
  padding: 0;
}

<body>
    <div class = "heading">
        <h1>"welcome"</h1>
    </div>
</body>
<nav>
    <ul>
        <li>Home</li>
    </ul>
</nav>

CSS: How to remove the space around?

7 Answers7