Databases
StackOverflow2013
Postsdbo
POHow do I remove the top margin in a web page?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I remove the top margin in a web page?
    text
    copied!<p>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: </p> <pre><code>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; } </code></pre> <p>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.</p> <p>Here is a more thorough look at the code (it is in the beginning stages of creation, so there isn't much in it...)</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;!-- TemplateBeginEditable name="doctitle" --&gt; &lt;title&gt;&lt;/title&gt; &lt;!-- TemplateEndEditable --&gt; &lt;!-- TemplateBeginEditable name="head" --&gt;&lt;!-- TemplateEndEditable --&gt; &lt;link href="../Styles/KB_styles1.css" rel="stylesheet" type="text/css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="mainContainer"&gt; &lt;p&gt;Here is the information&lt;/p&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Here is the CSS:</p> <pre><code>@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 */ </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload