主要容器的保证金设置为0但仍有保证金

时间：2016-04-08 05:32:59

标签： css margin

我试过没有做任何事情的css样式表重置，以及其他解决方案，但没有修复。容器上的边距设置为0，右侧仍有边距。如果我禁用左边距0，则左侧会出现额外的空格。提前谢谢。

picture of the problem 

body {
  padding-top: 50px;
}
.container {
  overflow: hidden;
  margin-left: 0 auto;
  margin-right: 0 auto;
  padding: 0 0 0 0;
}
#content {
  overflow: auto;
  background-color: #FFFFFF;
  margin-left: 0;
  margin-right: 0;
}
#content-left {
  color: #FFFFFF;
  float: left;
  background-color: #666666;
  width: 30%;
}
#content-right {
  color: #FFFFFF;
  float: right;
  background-color: #333333;
  width: 70%;
}
<body>
  <div class="container" id="main">
    <div id="content">
      <div id="content-left">
        <div>LEFT</div>

      </div>
      <div id="content-right">
        <div>RIGHT</div>

      </div>

    </div>
  </div>

</body>

2 个答案:

答案 0 :(得分：2)

将所有元素的边距设置为0px，这将删除额外的边距

* {
  margin: 0px;
}

同时将width: 100%添加到您的.container

注意：将此添加为CSS中的第一个样式。这可以通过下面指定的样式覆盖。

以下是对您的代码的更新。

＆＃13;
＆＃13; 
* {
  margin: 0px;
}
body {
  padding-top: 50px;
}
.container {
  width: 100%;
  overflow: hidden;
  margin-left: 0 auto;
  margin-right: 0 auto;
  padding: 0 0 0 0;
}
#content {
  overflow: auto;
  background-color: #FFFFFF;
  margin-left: 0;
  margin-right: 0;
}
#content-left {
  color: #FFFFFF;
  float: left;
  background-color: #666666;
  width: 30%;
}
#content-right {
  color: #FFFFFF;
  float: right;
  background-color: #333333;
  width: 70%;
}
＆＃13; 
<body>
  <div class="container" id="main">
    <div id="content">
      <div id="content-left">
        <div>LEFT</div>

      </div>
      <div id="content-right">
        <div>RIGHT</div>

      </div>

    </div>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

将#content div的宽度设置为100％将解决您的问题。这不是保证金问题。对于宽度％来处理内部div，它需要一个容器宽度基于。

#content{
    overflow: auto;
    background-color:#FFFFFF;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}
相关问题
最新问题