CODEWITHSUNDEEP
htmlcssmargin
Nipuna
Nipuna

Reputation: 7026

CSS Margin: 0 is not setting to 0

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>

Upvotes: 43

Views: 198837

Answers (12)

cds
cds

Reputation: 411

Try specific

html {
  margin: 0;
  padding: 0;
}

OR

* {
    margin: 0;
    padding: 0;
}

Upvotes: -3

Prajwal KV
Prajwal KV

Reputation: 61

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

       * {
           margin: 0;
           padding: 0;
         }

The above code works in almost all Browsers.

Upvotes: 1

Delta
Delta

Reputation: 43

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

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

Upvotes: 0

RS at Work
RS at Work

Reputation: 1

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

Upvotes: 0

HarshSigma
HarshSigma

Reputation: 61

add this code to the starting of the main CSS. 

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

Upvotes: -1

user7362925
user7362925

Reputation:

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.

Upvotes: 1

Zectbumo
Zectbumo

Reputation: 4481

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

Upvotes: 1

alter
alter

Reputation: 39

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).

Upvotes: 3

Dan G
Dan G

Reputation: 309

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.

Upvotes: 30

Yannick Loiseau
Yannick Loiseau

Reputation: 1454

you should have either (or both):

  1. a paddding != 0 on body
  2. 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.

Upvotes: 6

Hussein
Hussein

Reputation: 42818

Try

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

Upvotes: 2

alex
alex

Reputation: 490363

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.

Upvotes: 53

Related Questions