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 53 · Accepted Answer · answered Mar 22 '11 at 06:24

53

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

479,566
201
878
984

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 31 · Answer 2 · answered May 28 '11 at 04:18

31

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

319
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
The :root selector might be what you want, it is the same as html, but because its specificity is higher, and usually something already setting :root to some value is to blame when setting items above it seem to not work. The * selector selects all elements under whatever it precedes (in this case, nothing everything in the document), so you won't usually use that at the root level unless you are using properties like 'all' to force default, auto, initial, etc. I'd be careful with use of *, since it can come back to bite you if relied on too much. You'll end up with css full of !important. – osirisgothra Feb 26 '23 at 18:59

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,394
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
If it is *your* CSS, and not some other foreign untouchable CSS that you _must_ override because you can't modify it, you should avoid using !important. I only use it in cases where I am overriding someone else's code I can't touch. And even then, only if there is no other possible way, but there usually is some other way unless you are dealing with CSS that doesn't want its code overridden. – osirisgothra Feb 26 '23 at 19:06

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

42,480
25
113
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

4,128
1
31
26

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

score 1 · Answer 7 · 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.

Prajwal KV · Answer 8 · 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

51
6

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

cds · Answer 12 · 2023-04-15T17:55:26.967

-3

Try specific

html {
  margin: 0;
  padding: 0;
}

OR

* {
    margin: 0;
    padding: 0;
}

edited Apr 15 '23 at 17:55

answered Jul 17 '20 at 09:12

cds

403
3
5

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
I think most of us experienced developers left in dismay after reading the first three answers that decided that * was the way to go. This is one of those posts where I feel like it would take all day to explain to everyone where they went wrong, why this and that, and in the end tell the horse that it is a horse. – osirisgothra Feb 26 '23 at 19:09

CSS Margin: 0 is not setting to 0

12 Answers12

Linked

Related