Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to margin the body of the page (html)?

Tags:

html

css

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>
like image 507
Buffon Avatar asked Apr 14 '11 23:04

Buffon


People also ask

What is body margin in HTML?

Unique Attributes. leftmargin - Sets a left hand margin for your body element. topmargin - Sets a margin along the top of your body element.

Which tag is used for margin in HTML?

The <p> tag is case in point. By declaring margin, margin-top, margin-right, margin-bottom, and/or margin-left style properties for this tag, a paragraph can have its margins adjusted on all sides of the text block or on each side individually.


4 Answers

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.

like image 59
Damb Avatar answered Oct 12 '22 10:10

Damb


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

like image 21
Ady Ngom Avatar answered Oct 12 '22 10:10

Ady Ngom


Html for content, CSS for style

<body style='margin-top:0;margin-left:0;margin-right:0;'>
like image 3
Billy Moon Avatar answered Oct 12 '22 09:10

Billy Moon


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/

like image 2
Uday Hiwarale Avatar answered Oct 12 '22 09:10

Uday Hiwarale