Question

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

我尝试了背景大小：封面，但我希望页面的每个部分都有不同的背景。经过几个小时的搜索，我发现的唯一的事情是宽度：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％，周围有白色边框。为什么？

2 个答案: