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

Question

好的，我正在尝试设计一个网站，该网站顶部的图像横跨浏览器的整个宽度。在其下方，我想放置也跨越整个宽度的不同颜色的 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;

}

Answer 1

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

body{
    margin: 0;
}

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

Answer 2

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

*{
  padding:0;
  margin:0;
}

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

Width 100% with white borders around it. WHy?

html

css

image

width