主容器的边距设置为0但仍有边距

Question

我尝试了 css 样式表重置，但没有做任何事情，还有其他解决方案，但没有解决。容器上的边距设置为 0，右侧仍有边距。如果我禁用 margin left 0 额外的空白出现在左侧。提前致谢。

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>

Answer 1

将所有元素的边距设置为 0px，这将移除多余的边距

* {
  margin: 0px;
}

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

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

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

* {
  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%;
}

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

Answer 2

将#content div 的宽度设置为 100% 将解决您的问题。这不是保证金问题。为了使宽度 % 在内部 divs 上起作用，它需要一个容器宽度作为基础。

#content{
    overflow: auto;
    background-color:#FFFFFF;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

主容器的边距设置为0但仍有边距

Margin of main container set to 0 yet there is still a margin

css

margin