重复图像周围的白色空间

Question

我试图用重复的图像制作一个好的标题，但由于某种原因，它周围有空白区域。我已经尝试了很多方法来删除它，就像你在我的CSS中看到的那样但是我无法弄清楚它。

我的索引文件基本上只是Div Class Header。

CSS

.header{
position:relative;
width:100%; 
height: 478px;
float:left; 
background:url(../images/headBg.png) repeat-x;
padding: 0;
margin: 0;
outline: none;
border: 0;
overflow-x: hidden; 
}

这就是我所看到的。

Answer 1

空格是HTML页面周围的默认填充。将其添加到CSS中删除它：

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

Demo with padding

Demo without padding

Answer 2

正如我刚测试过的那样，你已经检查了主要的margin:0等，你的图像上会出现空白区域。

检查一下只是为了证明它不是代码。

DEMO HERE

---

如果你的意思是外围的间距是身体边缘：

html, body {
    margin: 0;
}

这将解决这个问题。

DEMO HERE

---

所以这将是你的最终版本（删除了所有不需要的CSS。）

DEMO HERE

Answer 3

要从中删除该空白区域，请将以下代码添加到CSS

body {margin:0; padding:0}

这将从文档中删除边距或填充（某些浏览器使用边距，一些填充），并且您的标题将与窗口齐平。

Answer 4

这个白色＆＃34;边界＆＃34;是由html和body元素的默认边距/填充引起的。也将其设置为0：

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

Answer 5

你看到的填充最有可能来自身体而非头部。你需要做

body{padding:0;margin:0;}