html - 重复图像周围的空白

Question

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

我的索引文件基本上就是 Div 类 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