34

I used the following

<body topmargin="0" leftmargin="0" rightmargin="0">

which works only on IE6. I want it to work with firefox and opera.

I attempted the following:

<style type="text/css">
.header {
    width: 100%;
    background-color: #3B5998;
    height: 35px;
    margin-top:0;
}
.style1 {
    margin-right: 38px;
}
.style2 {
    width: 100%;
    background-color: #3B5998;
    height: 35px;
}


</style>


<div dir="rtl" class="style2" style="width: 100%">
<p align="center"style="width: 92px; height: 32px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; color: #EFF1F6;" class="style1"></p>
</div>

</body>
LucioRandy
  • 220
  • 1
  • 19
Buffon
  • 3,613
  • 6
  • 21
  • 14
  • 2
    usually you get it to work on everything else, then tackle IE6 - you got it the other way round! – Billy Moon Apr 14 '11 at 23:44
  • `

    ` is causing your problems. Try nulling its margin too see. And check that `collapsing margins` link which Alex provided as a comment to his answer.

     – Damb Apr 15 '11 at 00:01

9 Answers9

61

For start you can use:

<body style="margin:0;padding:0">

Once you study a bit about css, you can change it to:

body {margin:0;padding:0}

in your stylesheet.

Damb
  • 14,410
  • 6
  • 47
  • 49
  • @Buffon: Then it's causing another element. I guess that you have h1 or any other heading as a first element. So null the margins of that element too or provide your code. – Damb Apr 14 '11 at 23:52
  • the code is : `

    . `     – Buffon Apr 14 '11 at 23:58
  • Add margin:0; to that paragraph element. – Damb Apr 14 '11 at 23:59
  • 2
    @Nyerguds could you please link a page that says that? As far as I know you shouldn't define units for zero. – Damb Jul 14 '15 at 11:41
  • Huh, really? Odd. Seems logical there would always need to be a unit. So, zero is a special case, then? – Nyerguds Jul 15 '15 at 14:01
3

Html for content, CSS for style

<body style='margin-top:0;margin-left:0;margin-right:0;'>
Blender
  • 289,723
  • 53
  • 439
  • 496
Billy Moon
  • 57,113
  • 24
  • 136
  • 237
3

Yeah a CSS primer will not hurt here so you can do two things: 1 - within the tags of your html you can open a style tag like this:

<style type="text/css">
  body {
   margin: 0px;
  }
  /*
   * this is the same as writing
   * body { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;}
   * I'm adding px here for clarity sake but the unit is not really needed if you have 0
   * look into em, pt and % for other unit types 
   * the rules are always clockwise: top, right, bottom, left
  */
</style>

2- the above though will only work on the page you have this code embeded, so if if you wanted to reuse this in 10 files, then you will have to copy it over on all 10 files, and if you wanted to make a change let's say have a margin of 5px instead, you would have to open all those files and make the edit. That's why using an external style sheet is a golden rule in front end coding. So save the body declaration in a separate file named style.css for example and from your add this to your html instead:

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

Now you can put this in the of all pages that will benefit from these styles and whenever needed to change them you will only need to do so in one place. Hope it helps. Cheers

Ady Ngom
  • 1,284
  • 2
  • 10
  • 12
2

I hope this will be helpful.. If I understood the problem

html{
     background-color:green;
}

body {
    position:relative; 
    left:200px;    
    background-color:red;
}
div{
    position:relative;  
    left:100px;
    width:100px;
    height:100px;
    background-color:blue;
}

http://jsfiddle.net/6M6ZQ/

Uday Hiwarale
  • 4,028
  • 6
  • 45
  • 48
1

You need to use css. It's how modern web design gets things done.

This is a basic css walk through.

Your html file would be like:

(really simple html)

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
    </head>
    <body>
    </body>
    <html>

Your css file (mystyle.css) would look like:

body 
{
 margin-top:0px;
 margin-left:0px;
 margin-right:0px;

}
k to the z
  • 3,217
  • 2
  • 27
  • 41
1

Try using CSS.

body {
   margin: 0 0 auto 0;
}

The order is clockwise from the top, so top right bottom left.

alex
  • 479,566
  • 201
  • 878
  • 984
  • lol :D .. i already know css alex and i tried ur code it good in left and right but in `top` not working – Buffon Apr 14 '11 at 23:47
  • How is it not working? Be a bit more specific (I have got to record macros for this). – Blender Apr 14 '11 at 23:50
  • 2
    @Buffon Are you aware of [collapsing margins](https://developer.mozilla.org/en/CSS/margin_collapsing)? – alex Apr 14 '11 at 23:51
1
<body topmargin="0" leftmargin="0" rightmargin="0">

I'm not sure where you read this, but this is the accepted way of setting CSS styles inline is:

<body style="margin-top: 0px; margin-left: 0px; margin-right: 0px;">

And with a stylesheet:

body
{
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
}
Blender
  • 289,723
  • 53
  • 439
  • 496
0

I would say: (simple zero will work, 0px is a zero ;))

<body style="margin: 0;">

but maybe something overwrites your css. (assigns different style after you ;))

If you use Firefox - check out firebug plugin.

And in Chrome - just right-click on the page and chose "inspect element" in the menu. Find BODY in elements tree and check its properties.

Scherbius.com
  • 3,396
  • 4
  • 24
  • 44
0
the body element have below styles by default
     body {
          display: block;
          margin: 8px;
        }
     body: focus {
          outline: none;
        }

we can override this using
1. inline styles       

    <body style="margin: 0;">

2. internal styling

        <style>
    body {
    margin: 0;
    }
    </style>
Vamsi Krishna Myneni
  • 1
  • 2
  • Check out here: Should have answer you seek. https://stackoverflow.com/questions/3679426/override-css-style – dustbuster Feb 03 '23 at 15:27