5

刚开始制作网站，整个左侧都有几个像素的边距，我不知道为什么。

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

任何建议将不胜感激

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

6 回答 6

5

您的身体标签margin: 8px;刚刚添加到您的 CSS

body {
    margin: 0;
}
于 2013-05-15T13:19:55.047 回答
2

这将解决它..

body{
margin:0;
padding:0;
}

把它放在一个css文件中。

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

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

于 2013-05-15T13:23:54.603 回答
1

你的 body 有 8px 的边距；

将边距设置为 0 像素，你是金色的

body {
  margin: 0px;
}
于 2013-05-15T13:19:56.167 回答
1

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

* {
    margin:0px;
    padding:0px;
}
于 2016-07-14T08:26:06.117 回答
0

尝试给出以下样式

CSS

body
{
 margin:0px;
}

或者

CSS

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

.navBar 
{
 position:realative;
 right:8px
}
于 2013-05-15T13:28:19.000 回答
0

您必须明确添加“top/bottom/right/left = [whatever]”才能使其正常工作。Position:fixed 使您的元素免受相对于其他元素的任何影响。

于 2019-04-25T19:25:17.213 回答