宽度100％，周围有白色边框。为什么？ [英] Width 100% with white borders around it. WHy?

问题描述

好的，我想设计一个网站，顶部有一个图像，跨越整个浏览器的宽度。下面我想把不同颜色的div容器也跨越全宽。有点像这样：
http://hayden-demo.squarespace.com/ p>

我已经尝试过background-size：cover，但是我想为页面的每个部分使用不同的背景。我经过多个小时的搜索后发现的唯一的东西是宽度：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; 
  

}

解决方案

默认情况下， body 元素有一些边距。除非你删除它们，你放在里面的任何元素，不管它的宽度（除非它在位置绝对我认为）将有一些边界。它们不是边界，而是元素的末端和身体的边之间的间隙。试试这个：

  body {
 margin：0; 
} 
  

如果这不起作用，请告诉我们您的代码示例在JSBin，Codepen或类似的（如果可能的话甚至是活版本）。

Ok, I'm trying to design a website that has an image at the top that spans the full width of the browser. And below that I want to put different colored div containers that also span the full width. kinda like this: http://hayden-demo.squarespace.com/

I've tried background-size:cover but I want different backgrounds for each section of the page. The only thing I've found after many hours of searching is width: 100% but it leaves white borders around my image... Please help, I'm desperate. This is my current 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;

}

解决方案

The body element has some margins by default. Unless you remove them, any element that you put inside, no matter it's width (unless it's in position absolute I think) will have some borders. They aren't borders, but the gab in between the end of your element and the side of the body. Try this :

body{
    margin: 0;
}

If that doesn't work, then please show us an example of your code on JSBin, Codepen or similar (or even a live version if possible).

这篇关于宽度100％，周围有白色边框。为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！