CSS Margin: 0 is not setting to 0

Question

I'm a new comer to web designing. I created my web page layout using CSS and HTML as below. The problem is even though i set the margin to 0, the upper margin is not setting to 0 and leaves some space. How can i clear this white space?

Screen Shot of the problem

There's a space in top

Style Sheet

<style type="text/css">
body{   
    margin:0 auto; 
    background:#F0F0F0;}

#header{
    background-color:#009ACD; 
    height:120px;}

#header_content { 
    width:70%; 
    background-color:#00B2EE;
    height:120px; 
    margin:0 auto;
    text-align:center;}

#content{   
        width:68%; 
        background-color:#EBEBEB;
        margin:0 auto; 
        padding:20px;}
</style>

HTML

<body>
    <div id="header">
     <div id="header_content">
           <p>header_content</p>
       </div>
    </div>
<div id="content">
Main Content
</div>
</body>

Here's the whole file

<!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>Book Shop</title>
<style type="text/css">
html, body, #header {
    margin: 0 !important;
    padding: 0 !important;
}
body{   
    margin:0;    padding: 0;
    background:#F0F0F0;}

#header{
    background-color:#009ACD; 
    height:120px;}

#header_content { 
    width:70%; 
    background-color:#00B2EE;
    height:120px; 
    margin:0 auto;
    text-align:center;}

#content{   
        width:68%; 
        background-color:#EBEBEB;
        margin:0 auto; 
        padding:20px;}

body {
   margin: 0;
   padding: 0;
}
</style>
</head>

<body>
  <div id="header">
     <div id="header_content">
           <p>header_content</p>
       </div>
    </div>
<div id="content">
Main Content
</div>

</body>
</html>

I hope this link(https://stackoverflow.com/a/18772399/2991952) will help you out effectively. — Deva, Mar 07 '18 at 15:00
It's actually margins collapse, when two margin collide, the margin will depends on the larger margin. You can refer to this site [MDN - Mastering margin collapsing](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing) — Brady Huang, Oct 31 '18 at 02:00

score 48 · Accepted Answer · answered Mar 22 '11 at 06:24

48

Try...

body {
   margin: 0;
   padding: 0;
}

jsFiddle.

Because of browsers using different default stylesheets, some people recommend a reset stylesheet such as Eric Meyer's Reset Reloaded.

answered Mar 22 '11 at 06:24

alex

460,746
196
858
974

No it's not working. But when I insert something without any tags, in between "header" and "header_content" tags its working – Nipuna Mar 22 '11 at 06:27
2

@Nipuna It worked for me. Try the CSS reset I linked to, there may be more margins and/or paddings in play. – alex Mar 22 '11 at 06:28

score 28 · Answer 2 · answered May 28 '11 at 04:18

28

You need to set the actual page to margin:0 and padding: 0 to the actual html, not just the body.

use this in your css stylesheet.

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

that will set the whole page to 0, for a fresh clean start with no margin or paddings.

answered May 28 '11 at 04:18

Dan G

289
3
2

What exactly does the * do? – etusm Aug 27 '16 at 02:14
4

"that will set the whole page to 0". You're right, it will set the WHOLE page to 0. With the `*` every single element on the page will have a margin and padding of 0 which is not wanted. – krummens Dec 31 '16 at 17:18
Worked for me. Thank you. – Ashok Jul 27 '17 at 08:31
3

Why `*` __and__ `html`? Won't the `*` match the `html` element? – alex May 11 '18 at 13:49
@alex Yes it will. – Mr Lister Aug 02 '21 at 07:35

score 6 · Answer 3 · answered Mar 22 '11 at 06:47

6

you should have either (or both):

a paddding != 0 on body
a margin !=0 on #header

try

html, #header {
    margin: 0 !important;
    padding: 0 !important;
}

The margin is the "space" outside the box, the padding is the "space" inside the box (between the border and the content). The !important prevent overriding of property by latter rules.

answered Mar 22 '11 at 06:47

Yannick Loiseau

1,344
8
8

I published the whole html document. Is it work fine for you? – Nipuna Mar 22 '11 at 07:01
no, don't work... and can't see why. this is frustrating ! all dev tools show a margin/padding of 0. – Yannick Loiseau Mar 22 '11 at 07:15
1

You should use `!important` *very* sparingly, if at all. – alex May 11 '18 at 13:50

score 3 · Answer 4 · answered May 20 '14 at 09:08

3

h1 {
margin-top:0;
padding-top: 0;}

It' s just a misunderstanding with h1 tag. You have to set h1 tag margin-top and padding-top to 0 (zero).

answered May 20 '14 at 09:08

alter

39
1

score 2 · Answer 5 · answered Mar 22 '11 at 06:38

2

Try

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

answered Mar 22 '11 at 06:38

Hussein

41,814
25
111
143

No it didn't worked either. But the reset sheet worked. I was wondering what the problem is – Nipuna Mar 22 '11 at 06:46
2

see my response below... took me too long to write it, you already accepted ;) – Yannick Loiseau Mar 22 '11 at 06:49
2

@nipuna Do you have any tables in your html. I'm wondering what in the reset file is solving your issue. Do you have other HTML loading besides what you provided above. – Hussein Mar 22 '11 at 06:49
@Yannick: I'm sorry but the reset sheet worked for me. That's why I accepted it. But your one also didn't worked for me. Maybe the problem is with the browser – Nipuna Mar 22 '11 at 06:52
2

@nipuna: no pb... the reset stylesheet is a good practice anyway.curious about what it solved exactly... – Yannick Loiseau Mar 22 '11 at 06:54
@Hussein: I inserted the whole file: see the question – Nipuna Mar 22 '11 at 06:58
my problem is about using different stylesheet on the project. so !important has worked for me as removing stylesheet. – eemrah Jan 19 '18 at 06:31
Avoid `!important` --> https://www.smashingmagazine.com/2010/11/the-important-css-declaration-how-and-when-to-use-it/ – Outside_Box Feb 12 '18 at 10:39

score 1 · Answer 6 · answered Jul 14 '15 at 04:30

1

It seems that nobody actually read your question and looked at your source code. Here's the answer you all have been waiting for:

#header_content p {
    margin-top: 0;
}

jsFiddle

answered Jul 14 '15 at 04:30

Zectbumo

3,339
29
23

You can also fix it by changing the
to a
or http://jsfiddle.net/80oc6vzy/1/
– Zectbumo Jul 14 '15 at 04:34

Prajwal KV · Answer 7 · 2021-02-23T13:18:50.810

1

Just use this code at the Start of the main CSS.

       * {
           margin: 0;
           padding: 0;
         }

The above code works in almost all Browsers.

edited Feb 23 '21 at 13:18

answered Feb 22 '21 at 09:31

Prajwal KV

31
6

score 0 · Answer 8 · answered Jan 01 '17 at 17:23

After reading this and troubleshooting the same issues, I agree that it is related to headings (h1 for sure, havent played with any others), also browser styles adding margins and paddings with clever rules that are hard to find and over-ride.

I have adapted a technique used to apply the box-sizing property properly to margins and paddings. the original article for box-sizing is located at CSS-Tricks :

html {
margin: 0;
padding: 0;
}
*, *:before, *:after {
margin: inherit;
padding: inherit;
}

So far it is exactly the trick for not using complex resets and makes applying a design much easier for myself anyways. Hope it helps.

score 0 · Answer 9 · answered May 09 '20 at 07:46

I just started learning CSS today and encountered the same problem and I think You don't need to reset style of all HTML tags. You need to reset default margin of top HTML You used, which is paragraph tag. And I know this is old question, but maybe my solution below will help somebody.

Try this:

body{   
    margin: 0; 
    background:#F0F0F0;
}
p{
    margin: 0;
}

score 0 · Answer 10 · answered Aug 18 '20 at 13:59

0

It's very simple. just add this to the body -

body{
margin:0;
padding:0;
overflow:hidden;
}

answered Aug 18 '20 at 13:59

Ray

43
6

score -1 · Answer 11 · answered Jun 11 '18 at 09:17

-1

add this code to the starting of the main CSS.

*,html,body{
  margin:0 !important;
  padding:0 !important;
  box-sizing: border-box !important;;
}

answered Jun 11 '18 at 09:17

HarshSigma

61
2
7

1

Setting a zero margin on the html element interferes with the scrolling on an iPad making it very jerky and sticky. You can't flick upwards and having it carry on scrolling, so be careful with this. Fine to set zero margin on body – sketchyTech Aug 25 '18 at 16:57

score -2 · Answer 12 · edited Jul 17 '20 at 10:10

-2

Try

body {
    margin: 0;
    padding: 0;
}

instead of

.body {
    margin: 0;
    padding: 0;
}

Do not select body with class selector.

edited Jul 17 '20 at 10:10

fuggerjaki61

802
1
10
23

answered Jul 17 '20 at 09:12

chandrakant sangale

351
2
4

2

This answer appears to repeat what multiple other answers, including the accepted answer, already suggest. New answers, especially to old questions, should present new solutions rather than repeating or rehashing old ones. – TylerH Jul 17 '20 at 10:12

CSS Margin: 0 is not setting to 0

12 Answers12

Linked

Related