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

【问题标题】：Unwanted margin/gap left hand side of entire webpage整个网页的左侧不需要的边距/间隙
【发布时间】：2019-04-26 03:25:17
【问题描述】：

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

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>

【问题讨论】：

标签： html css margin

【解决方案1】：

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

body {
    margin: 0;
}

【讨论】：

谢谢！我错过了一些非常明显的事情！

【解决方案2】：

这将解决它..

body{
margin:0;
padding:0;
}

把它放在一个css文件中。

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

这个不错 - http://meyerweb.com/eric/tools/css/reset/

【讨论】：

【解决方案3】：

你的 body 有 8px 的边距；

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

body {
  margin: 0px;
}

【讨论】：

谢谢！我错过了一些非常明显的东西！

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

尝试给出以下样式

CSS

body
{
 margin:0px;
}

或

CSS

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

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

【讨论】：

【解决方案6】：

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

【讨论】：