Question

我试图让我的代码的背景有一个300px高度和100％宽度的图片，但是当我将宽度设置为100％时，它不会一直走，大约有15px每边之间的区域。我知道我可以将宽度设置为1000px，但这有很多问题;比如在一些不同尺寸的显示器上看起来不错。我以前曾问过这样的问题，但它有几个不同的方面。它得到了回答，但我不能用这个解决方案回答这个问题。

JSfiddle

HTML：

<div id='header'>
  <img src='http://i.imgur.com/tvTMm.jpg' id='headerbg'>
</div>

CSS：

#headerbg {
 background-image:url('http://i.imgur.com/tvTMm.jpg');
  height:300px;
  width:100%;
  background-repeat:none;
  background-size:1340px;
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
}

Answer 1

只需添加此CSS即可删除空格

<强> CSS

body,html{
    margin:0;
    padding: 0;

}

<强> DEMO HERE

Answer 2

请检查小提琴 - https://jsfiddle.net/afelixj/g3bwfx6y/ 没有额外的空间。

额外空格是margin的默认body吗？

Answer 3

通常是填充，

body, html {
     margin: 0; padding: 0;
}

通常不起作用，因为来自“更具体”选择的填充CSS优先。像这样：

menu li {
     padding: 10px;
}

将优先。因此，您应该从自己的特定行中整理出代码。或使用“！”重要标记。

body, html {
     margin: 0!; padding: 0!;
}

将优先于：

 menu li {
     padding: 10px;
}

Div宽度为100％，但两侧仍有空间

3 个答案: