All geek questions in one place

Unwanted margin / tear on the left side of the entire web page

I just started to create a site, and I have a few pixels indent all over the left side, and I can’t understand why.

http://jsbin.com/elufob/1/

Any advice would be greatly appreciated.

CSS

html{ min-width: 100%; background-color: #add8e6; } .navBar{ text-align: center; background-image: linear-gradient(to bottom, #666666 0%, #000000 60%); color: white; border-bottom:solid 1px #666; top:0; height:30px; position:fixed; width:100%; z-index:1000; } .leftDiv{ clear: left; text-align: left; background-color: blue; float: left; max-width: 26%; display: inline-block; margin-right:2%; margin-left: 0%; margin-top: 2%; border: black; border-width: 5px; border-style: double; border-radius: 5px; } .middleDiv{ text-align: center; background-color: green; max-width: 70%; float: right; display: inline-block; margin-top: 2%; MARGIN-BOTTOM: 1%; border-style: solid; border: black; border-width: 5px; border-style: double; border-radius: 5px; } .pageContainer{ width: 100%; min-height: 100%; min-width: 100%; height: auto !important; height: 100%; margin: 0 auto -142px; } .footer{ background-image: linear-gradient(to bottom, #666666 0%, #000000 60%); color: white; border-top:solid 1px #666; bottom:0; height:15px; padding:5px; position:fixed; width:100%; z-index:1000; }

And HTML

 <html> <link rel="stylesheet" href="psWebCss"> <header class=navBar> <a href="http://www.google.com"><img src="http://library.thinkquest.org/10127/media/examples/Button.gif"></a> <a href="http://www.google.com"><img src="http://library.thinkquest.org/10127/media/examples/Button.gif"></a> <a href="http://www.google.com"><img src="http://library.thinkquest.org/10127/media/examples/Button.gif"></a> <a href="http://www.google.com"><img src="http://library.thinkquest.org/10127/media/examples/Button.gif"></a> </header> <body> <div class="pageContainer"> <div class="leftDiv"> </div> <div class="middleDiv"> </div> </div> <div class="footer"> Footer Text </div> </body> </html>
+5
source share
6 answers

Margin tag body tag margin: 8px; just add to your css

 body { margin: 0; }
+4
source

This will fix it.

 body{ margin:0; padding:0; }

Put this in the css file.

I think it would be better to use the reset stylesheet (if not already) to overwrite all the default browser styles that will cause issues like yours.

This is a good option - http://meyerweb.com/eric/tools/css/reset/

+2
source

Your body is 8px in size;

set the field value to 0px and you will be golden

 body { margin: 0px; }
+1
source

Try to give below style

CSS

 body { margin:0px; }

OR

CSS

 .pageContainer, { position:realative; right:8px } .navBar { position:realative; right:8px }
0
source

Always add these two lines so that the default irregular marker and the fill setting are 0:

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

You must explicitly add "top / bottom / right / left = [what]" for this to work. Position: fixed frees your element from any effects relative to other elements.

0
source

Source: https://habr.com/ru/post/1480952/

More articles:


All Articles