Question

刚刚开始创建一个网站，我整个左手边都有几个像素的边距，我无法弄清楚原因。

非常感谢任何建议

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;
}

和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>

Answer 1

你的身体标签只有margin: 8px;加入你的css

body {
    margin: 0;
}

Answer 2

这将解决它..

body{
margin:0;
padding:0;
}

将其放在css文件中。

我认为最好使用重置样式表（如果你还没有）覆盖任何会导致诸如你的问题的默认浏览器样式。

这是一个很好的 - http://meyerweb.com/eric/tools/css/reset/

Answer 3

你的身体有8px的余量;

将保证金设置为0px并且你是黄金

body {
  margin: 0px;
}

Answer 4

尝试给出以下风格

<强> CSS

body
{
 margin:0px;
}

或

<强> CSS

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

Answer 5

始终添加这两行，以使不均匀边距和填充默认设置为0：

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

Answer 6

您必须明确添加“上/下/右/左= [任何内容””，此功能才能起作用。位置：固定可让您的元素不受其他元素的影响。

整个网页左侧不需要的边距/间隙

6 个答案: