宽度 100%，周围有白色边框。为啥？

Posted 2023-03-06

【中文标题】宽度 100%，周围有白色边框。为啥？

【英文标题】：Width 100% with white borders around it. WHy?宽度 100%，周围有白色边框。为什么？

【发布时间】：2015-07-06 08:10:08

【问题描述】：

好的，我正在尝试设计一个网站，其顶部的图像跨越浏览器的整个宽度。在此之下，我想放置不同颜色的 div 容器，它们也跨越整个宽度。有点像这样： http://hayden-demo.squarespace.com/

我尝试过 background-size:cover 但我希望页面的每个部分都有不同的背景。经过数小时的搜索，我唯一发现的是 width: 100% 但它在我的图像周围留下了白色边框...... 请帮忙，我很绝望。这是我当前的 CSS：

    .mainimg 
background-image: url(_DSC0656.jpg);
background-repeat: no-repeat;
background-position: center center;
-moz-background-size: cover;
background-size: cover;
width:100% !important;
height: 700px;
margin:0 auto;
display:block;

【参考方案1】：

body 元素默认有一些边距。除非您删除它们，否则您放入的任何元素，无论它的宽度（除非它位于 absolute 我认为的位置）都会有一些边框。它们不是边界，而是元素末端和身体侧面之间的间隙。试试这个：

body
    margin: 0;

如果这不起作用，请向我们展示您在 JSBin、Codepen 或类似工具上的代码示例（如果可能，甚至是实时版本）。

【讨论】：

您自己尝试过该解决方案还是只是猜测保证金问题？

哇哦，好用！不敢相信我没想到这一点。非常感谢！

@tchrikch 我以前遇到过很多次这个问题，现在已经解决了，我正在尽我所能使用他提供的代码。查看他现有的代码，除非他没有删除正文上的边距，否则它应该可以工作。

非常感谢，这符合预期！

【参考方案2】：

您是否尝试将所有元素的边距和内边距重置为 0，如果没有，请尝试将以下代码添加到您的 css 文件中。

*
  padding:0;
  margin:0;

【讨论】：

我对 html 和 div 元素做了“是”。但由于某种原因，不像查尔斯所说的那样对身体。无论如何，感谢您的快速回复！