Div 宽度 100% 但两侧仍有空间答案

【问题标题】：Div width 100% but there is still space on the sidesDiv 宽度 100% 但两侧仍有空间
【发布时间】：2020-02-28 17:57:11
【问题描述】：

我试图让我的代码的背景有一个高度为 300px 宽度为 100% 的图片，但是当我将宽度设置为 100% 时，它并没有一路走下去，大约有 15px每边之间的区域。我知道我可以将宽度设置为 1000 像素，但这有很多问题；例如，在某些不同尺寸的显示器上可能看起来不错。我以前问过这样的问题，但它有几个不同的方面。它得到了回答，但我无法使用该解决方案来回答这个问题。

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);
}

【问题讨论】：

小提琴链接不起作用
请显示#header的风格。你有 #header 的填充吗？
在 Chromium 中打开页面，右键单击图像并选择“检查元素”。在底部，有一个显示填充、间距等的图像。调整样式直到多余的空间消失，然后将找到的内容应用于原始源。 Firefox+Firebug 和 Opera 也可以，但显示可能不同。
developer.mozilla.org/en-US/docs/Web/CSS/box-sizing.

标签： html css spacing

【解决方案1】：

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

CSS

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

}

DEMO HERE

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

通常是填充，并且

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

通常不起作用，因为您的“更具体”选择中的 Padding 的 CSS 将优先考虑。比如：

menu li {
     padding: 10px;
}

会优先考虑。所以，你应该从它自己的特定行中整理出代码。或使用“！”重要的标志。

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

将优先于：

 menu li {
     padding: 10px;
}

【讨论】：