Best IT Recipes

How to remove the top margin on a web page?

I had this problem with every webpage I created. There is always an upper edge above the main container that I use to place my content in the center of the page. I use the css stylesheet and set the margins and indents 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 browsed the Internet many times, but all I can do is set these margin and padding attributes. Is there anything else I should do? Margin exists in IE and Firefox.

Here is a more detailed look at the code (it is in the initial stages of creation, so there’s not 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 */
+48
html css
Mar 21 '10 at 22:45
source share
15 answers

I had a similar problem, it was solved using the following CSS:

 body { margin: 0 !important; padding: 0 !important; }
+44
Dec 06
source share

Is your first element h1 or similar? This margin-top element can call what appears to be an edge on the body .

+71
Mar 21 '10 at 22:55
source share

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

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

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

This will delete all predefined fields and additions with all elements of body, h1, h2, p, etc. Now you can make the top or page title flush with the browser along with any images or text in other divs.

+23
Jul 10 2018-12-12T00:
source share

Many CSS elements have padding and margins by default. So, when you start creating a new site, it is always good to have a reset.css file. Add this to rub the defaults, 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; }

Hope this helps all developers, this is what I listened to for a while while I was studying.

+10
Jun 05 '12 at 13:00
source share

You can prevent margin reversal effects by:

 body { overflow: hidden }

This will cause the body fields to remain accurate.

+9
Sep 17
source share

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

 h1{margin-top:0px}

My main div contained the h1 tag at the beginning.

+3
Sep 21 2018-11-11T00:
source share

I had a similar problem. I need a percentage growth and an upper bound for my div container, but the body will take over the edge of the div container. I think I understood the solution.

Here is my original (problematic) 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 as well 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 have not tested it in every browser, but it works.

+2
Jul 05 2018-11-15T00:
source share

Here is the code that everyone asked for - at the very beginning of development, so there isn’t much that can be useful ...

 <!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 */
+1
Mar 21 '10 at 23:06
source share

Try the -10px box :

 body { margin-top:-10px; }
+1
May 03 '14 at 16:30
source share

The same problem made me go crazy for several hours. What I found and you can check is the html coding. In my html file, I declared utf-8 encoding and used Notepad ++ to enter the html code in utf-8 format. What I forgot was the UTF-8 specification and the lack of specification. It seems that when utf-8 announced that the html file was written as a UTF-8 specification, there is some invisible extra character at the beginning of the file. The character (non-printable, I think) affects one line of “text” at the top of the page. And you cannot see the difference in the original form of the browser (in my case, Chrome). Both good and damaged files seem similar to the character, but one of them looks beautiful, and the other shows this extra top edge.

To wrap this solution, you need to convert the file to UTF-8 NO BOM, and this can be done in ie Notepad ++.

+1
Oct 06 '15 at 11:25
source share
 style="text-align:center;margin-top:0;" cz-shortcut-listen="true"

insert this into your body tag!

this will remove the top margin

0
Jan 29 '14 at 15:58
source share

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

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

It actually works with any number that is not equal to zero. I really don't know why it took care of this. I'm not so knowledgeable about CSS and HTML, and this seems to be controversial. Setting the body, html, h1 and paddings fields to 0 did not affect me. I also had h1 at the top of my page

0
Oct 10 '14 at 6:08
source share

 body{ margin:0; padding:0; } 
 <span>Example</span>
0
Mar 14 '16 at 1:44
source share

I tried almost every online technique, but I still had a place on my website when I opened it using the Opera mobile phone browser, so I decided to fix it myself, and I understood!

I understand that even when you display the page in one layout, it fits the website on the screen, and some css functions are disabled, since the margin, padding, float and position functions are automatically disabled when you adapt to the screen, and the body always adds built-in add-on at the top. so I decided to look for at least one function that works, guess what? "Display". let me show you how!

 <html> <head> <style> body { display: inline; } #top { display: inline-block; } </style> </head> <body> <div id="top"> <!-- your code goes here! --> eg: <div id="header"></div> <div id="container"></div> and so on.. <!-- your code goes here! --> </div> </body> </html>

If you notice, the body {display: inline;} removes the built-in addition to the body, but without #top {display: inline-block;}, the div still does not display well, so you must include the <div id="top"> element before any code on your page! so simple .. hope this helps? you can thank me if it works, http://www.facebook.com/exploxi

0
04 Oct '16 at 10:03
source share

You can also check:

 {float: left;}

and

 {clear: both;}

are used correctly in your CSS.

0
Nov 06 '16 at 10:13
source share


More articles:


All Articles