如何避免在 div 上应用的背景颜色周围出现空间？ [关闭]

Posted 2023-02-21

【中文标题】如何避免在 div 上应用的背景颜色周围出现空间？ [关闭]

【英文标题】：How can you avoid space around a background color applied on a div? [closed]

【发布时间】：2021-12-14 04:26:23

【问题描述】：

这是我写的代码。但它不像我预期的那样工作。背景颜色周围仍有空间，我想用该颜色覆盖 div。

这里有什么问题？

#div 
    background-color: black;
    margin: 0;

【问题讨论】：

尝试从 div 中删除填充--- div padding:0.. 还建议您更改 id - id 为 'div' 的 div 似乎是错误的 :)

请提供一个代码运行在线编辑器然后指出你的问题

【参考方案1】：

这可能有两个原因：

您没有在 CSS 中为整个 DOM 设置初始值 0 父元素上有一些padding，或子元素上有margin，需要删除

附加一个可运行的 sn-p 供您参考

*
  margin:0;
  padding:0;
  box-sizing:border:box


.main
  background:blue;
  padding:1rem;


.child
  background:red;
  padding:1rem;


.grandchild
  background:yellow;
  padding:1rem;

<div class=main>
  <div class="child">
    <div class="grandchild">
        Text
    </div>
  </div>
</div>

【讨论】：

我已将整个 DOM 的边距值设置为零。而且效果很好。谢谢！

【参考方案2】：

background-color 不适用于边距。将margin: 0; 替换为padding: 0;