刚刚开始制作一个网站，我的左手边有几个像素的边缘，我无法弄清楚原因。
任何建议将不胜感激
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>
你的身体标签有margin: 8px;只是添加在你的CSS
body {
margin: 0;
}
这将解决它..
body{
margin:0;
padding:0;
}
将其放在css文件中。
我认为最好使用重置样式表（如果你还没有）覆盖任何会导致诸如你的问题的默认浏览器样式。
你的身体有8px的余量;
将边距设置为0px，你就是黄金
body {
margin: 0px;
}
尝试给出以下风格
CSS
body
{
margin:0px;
}
要么
CSS
.pageContainer,
{
position:realative;
right:8px
}
.navBar
{
position:realative;
right:8px
}
始终添加这两行，以使不均匀边距和填充默认设置为0：
* {
margin:0px;
padding:0px;
}
您必须明确添加“top / bottom / right / left = [whatever]”才能使用此功能。 Position：fixed使您的元素免于相对于其他元素的任何影响。