设置body背景色后.container-fluid div颜色不同，如何统一二者背景色？

嘿，这个问题我之前帮人排查过，其实处理起来很简单！咱们先理清楚问题根源，再一步步解决：

你现在的情况是，给body设置了背景色，但.container-fluid看起来颜色不一致——看你的代码，你已经给.container-fluid加了和body相同的内联背景色，那大概率是两个小问题在搞鬼：一是浏览器或Bootstrap给body加了默认边距，导致容器周围露出异常色块；二是重复设置背景色容易引发样式冲突，完全没必要。

最优解决方案步骤： #

• 统一背景色设置，避免重复：直接只给body设置背景色，删掉.container-fluid上的内联style="background-color:rgb(0,223,26)"，这样容器会自动继承body的背景色，不会出现颜色差异。
• 清除body的默认边距：浏览器默认会给body加8px左右的margin，Bootstrap也可能有相关默认样式，这会导致页面边缘出现白边，我们需要手动清除。
• 修复多余布局类（可选但建议）：你的HTML里<div class="offset-4 col-4 offset-4">重复写了offset-4，会导致布局偏移出错，只保留一个即可。

修正后的完整代码： #

CSS部分

body {
  background-color: rgb(0, 223, 26);
  margin: 0; /* 清除浏览器默认边距 */
  padding: 0;
}

HTML部分

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="offset-4 col-4">
      <div class="offset-1">
        <h1 style="color:rgb(240,255,0)">Random Einstein's Quote Generator</h1>
      </div>
      <b><div class="randomquote" style="font-size:20px">
      </div></b>
      <div class="offset-3">
        <button id="quotegenerator" style="font-size:14px" class="offset-1 col-4 btn btn-primary">New Quote</button>
      </div>
    </div>
  </div>
</div>

如果做完这些还是有颜色差异，你可以用浏览器开发者工具（按F12）选中.container-fluid元素，查看样式面板，看看是不是有其他CSS规则覆盖了背景色——找到规则后，要么修改它，要么用更具体的选择器强化body的样式（比如html, body { ... }）。

内容的提问来源于stack exchange，提问作者Guja Markozashvili