CODEWITHSUNDEEP
htmlcss
RoryG
RoryG

Reputation: 1123

How do I remove the top margin in a web page?

I have had this problem with every web page I have created. There is always a top margin above the 'main container' div I use to place my content in the center of the page. I am using a css style sheet and have set margins and padding in the body to 0px and set the margin and padding to 0 in the div: 

body{
    margin-top: 0px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    margin-right: 0px;
    padding: 0;
    color: black; 
    font-size: 10pt; 
    font-family: "Trebuchet MS", sans-serif;
    background-color: #E2E2E2;
}

div.mainContainer{
    height: auto; 
    width: 68em;
    background-color: #FFFFFF;
    margin: 0 auto; 
    padding: 0;
}

I have looked online many times, but all I can see to do is set these margin and padding attributes. Is there something else I should be doing? The margin exists in IE and Firefox.

Here is a more thorough look at the code (it is in the beginning stages of creation, so there isn't much in it...)

<!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" />
        <!-- TemplateBeginEditable name="doctitle" -->
        <title></title>
        <!-- TemplateEndEditable -->
        <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
        <link href="../Styles/KB_styles1.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="mainContainer">
            <p>Here is the information</p>
        </div>
    </body>
</html>

Here is the CSS:

@charset "utf-8";
/* CSS Document */

body{
    margin-top: 0px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    margin-right: 0px;
    padding: 0;
    color: black; 
    font-size: 10pt; 
    font-family: "Trebuchet MS", sans-serif;
    background-color: #E2E2E2;
}

/* ---Section Dividers --------------------------------------------------------------*/
div.mainContainer{
    position: relative; 
    height: auto; 
    width: 68em;
    background-color: #FFFFFF;
    margin: 0 auto; 
    padding: 0;
}

div.header{
    padding: 0; 
    margin: 0;
}

div.leftSidebar{
    float: left;
    width: 22%; 
    height: 40em;
    margin: 0;
}

div.mainContent{
    margin-left: 25%;
}

div.footer{
    clear: both;
    padding-bottom: 0em; 
    margin: 0;
}

/* Hide from IE5-mac. Only IE-win sees this. \*/
   * html div.leftSidebar { margin-right: 5px; }
   * html div.mainContent {height: 1%; margin-left: 0;}
/* End hide from IE5/mac */

Upvotes: 69

Views: 308164

Answers (18)

user11092881
user11092881

Reputation:

Ok, so if you have a h1 element with a margin or padding of greater than 0, you want the wrapping element to have the style: overflow:hidden. Sometimes, applying it to the body won't work, as the element containing the h1 or p element may be a div.

The wrapping element could be main, div or something else.

So don't do this:

* {
   margin: 0px;
   padding: 0px;
}

And hover every element like a h1 or p with a default margin, and then check the immediate parent and then apply a overflow:hidden on that element.

Upvotes: 0

Shivam
Shivam

Reputation: 11

same problem, h1 was causing it to have that massive margin-top. after that you can use body{margin: 0;} and its looks good. another way is using *{margin: 0;} but it might mess up margins of other elements for you.

Upvotes: 1

Slawomir Jakubek
Slawomir Jakubek

Reputation: 117

It is a <p> element that creates the top margin. You removed all top margins except of that element.

Upvotes: 1

Abel Akponine
Abel Akponine

Reputation: 9

For opera just add this in header

<link rel='stylesheet' media='handheld' href='body.css' />

This makes opera use most of your customised css.

Upvotes: 1

Michał Lester
Michał Lester

Reputation: 1

you may also check if:

{float: left;}

and

{clear: both;}

are used correctly in your css.

Upvotes: 0

JumboUser155
JumboUser155

Reputation: 33

body{
margin:0;
padding:0;
}
<span>Example</span>

Upvotes: 0

jwbreedlove
jwbreedlove

Reputation: 617

The best way to reset margins for all elements is to use the css asterisk rule.

Add this to the top of your css under the @charset:

* {
   margin: 0px;
   padding: 0px;
}

This will take away all the preset margins and padding with all elements body,h1,h2,p,etc. Now you can make the top or header of your page flush with the browser along with any images or text in other divs.

Upvotes: 42

Jakub Sawczuk
Jakub Sawczuk

Reputation: 31

The same issue has been driving me crazy for several hours. What I found and you may want to check is html encoding. In my html file I declared utf-8 encoding and used Notepad++ to enter html code in utf-8 format. What I DID forget of was UTF-8 BOM and No BOM difference. It seems when utf-8 declared html file is written as UTF-8 BOM there is some invisible extra character at the begining of the file. The character (non-printable I guess) effects in one row of "text" at the top of the rendered page. And you cannot see the difference in source-view of the browser (Chrome in my case). Both nice and spoiled files seem identical to the very character, still one of them renders nicely and the other one shows this freaking upper margin.

To wrap it up the solution is to convert the file to UTF-8 NO BOM and one can do it in i.e. Notepad++.

Upvotes: 2

mindmyweb
mindmyweb

Reputation: 898

A lot of elements in CSS have default padding and margins set on them. So, when you start building a new site, it's always good to have a reset.css file ready. Add this to make to rub the default values, so you have more control over your web page.

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
html,body {
    margin:0;
    padding:0;
}


/* Extra options you might want to consider*/

table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
input{
    border:1px solid #b0b0b0;
    padding:3px 5px 4px;
    color:#979797;
    width:190px;
}
address,caption,cite,code,dfn,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { 
    border:0;
}

I hope this helps all fellow developers this is something that bugged for me a while when I was learning.

Upvotes: 17

nonex
nonex

Reputation: 233

I had this exact same problem. For me, this was the only thing that worked:

div.mainContainer { padding-top: 1px; }

It actually works with any number that's not zero. I really have no idea why this took care of it. I'm not that knowledgeable about CSS and HTML and it seems counterintuitive. Setting the body, html, h1 margins and paddings to 0 had no effect for me. I also had an h1 at the top of my page

Upvotes: 0

Krii
Krii

Reputation: 907

Try margin -10px:

body { margin-top:-10px; }

Upvotes: 3

jorgen
jorgen

Reputation: 1

style="text-align:center;margin-top:0;" cz-shortcut-listen="true"

paste this at your body tag!

this will remove the top margin

Upvotes: -1

sagar
sagar

Reputation: 1432

I had similar problem, got this resolved by the following CSS:

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

Upvotes: 86

ryanve
ryanve

Reputation: 52501

You can prevent the effects of margin collapsing with:

body { overflow: hidden }

That will make the body margins remain accurate.

Upvotes: 10

Sunil
Sunil

Reputation: 71

I had same problem. It was resolved by following css line;

h1{margin-top:0px}

My main div contained h1 tag in the beginning.

Upvotes: 6

edan
edan

Reputation: 1168

I have been having a similar issue. I wanted a percentage height and top-margin for my container div, but the body would take on the margin of the container div. I think I figured out a solution.

Here is my original (problem) code:

html {
    height:100%;
}

body {
    height:100%;                    
    margin-top:0%;
    padding:0%; 
}

#pageContainer {
    position:relative;
    width:96%;                  /* 100% - (margin * 2) */
    height:96%;                 /* 100% - (margin * 2) */           
    margin:2% auto 0% auto;
    padding:0%;
}

My solution was to set the height of the body the same as the height of the container.
html { height:100%; }

body {
    height:96%;     /* 100% * (pageContainer*2) */
    margin-top:0%;
    padding:0%; 
}

#pageContainer {
    position:relative;
    width:96%;                  /* 100% - (margin * 2) */
    height:96%;                 /* 100% - (margin * 2) */           
    margin:2% auto 0% auto;
    padding:0%;
}

I haven't tested it in every browser, but this seems to work.

Upvotes: 2

RoryG
RoryG

Reputation: 1123

Here is the code that everyone was asking for -- its at the very beginning of development so there isn't much in it yet, which may be helpful...

<!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" />
    <!-- TemplateBeginEditable name="doctitle" -->
        <title></title>
    <!-- TemplateEndEditable -->
    <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
    <link href="../Styles/KB_styles1.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="mainContainer">
  <div class="header">  </div>
  <div class="mainContent">  </div>
 <div class="footer">  </div> 
</div>
</body>
</html>

Here is the css:

@charset "utf-8";
/* CSS Document */

body{
    margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;
    padding: 0;
    color: black; font-size: 10pt; font-family: "Trebuchet MS", sans-serif;
    background-color: #E2E2E2;}

html{padding: 0; margin: 0;}

/* ---Section Dividers -----------------------------------------------*/
div.mainContainer{
    height: auto; width: 68em;
    background-color: #FFFFFF;
    margin: 0 auto; padding: 0;}

div.header{padding: 0; margin-bottom: 1em;}

div.leftSidebar{
    float: left;
    width: 22%; height: 40em;
    margin: 0;}

div.mainContent{margin-left: 25%;}

div.footer{
    clear: both;
    padding-bottom: 0em; margin: 0;}

/* Hide from IE5-mac. Only IE-win sees this. \*/
* html div.leftSidebar { margin-right: 5px; }
* html div.mainContent {height: 1%; margin-left: 0;}
/* End hide from IE5/mac */

Upvotes: 1

strager
strager

Reputation: 90012

Is your first element h1 or similar? That element's margin-top could be causing what seems like a margin on body.

Upvotes: 116

Related Questions