html - 内容未触及屏幕两侧

Question

我想把我的标题放在一个 div 中，但 div 没有直接接触任何页面，但两侧有一点空间。为什么？我怎样才能删除它？div只是

<div class="header">
    <img src="images/header.png" width="600" height="252" alt="Header" />
</div>

style.css 文件包含

.header {
    background: url(../images/header_extend.png) repeat-x center;
    overflow: hidden;
}
.header img {
   display:block;
   margin:0px auto;
   max-width: 100%;
   height: auto;
   overflow: hidden;
}

header_extend.png 是填充屏幕宽度的其余部分。

Answer 1

尝试添加css：

body {
   margin: 0px;
   padding: 0px;
}
.div {
   margin: 0px;
   padding: 0px;
}

如果它仍然不起作用，请将您的代码修剪为一行。有时从断线处有一点 1px 的空间。

像这样：

<div class="header"><img src="images/header.png" width="600" height="252" alt="Header" /></div>

Answer 2

您应该从 body 标记中删除默认边距。

body { margin:0 }

此外，如果您想使用百分比作为.headerdiv 的宽度，您还应该指定父级的宽度。如果父级是body标签，你可以这样做：

body { 
    margin: 0;
    width: 100%; 
}

这是一个小提琴

Answer 3

尝试在 CSS 顶部添加重置。它经常压扁这些小间距错误。

http://meyerweb.com/eric/tools/css/reset/