Question

我正在试验我的标题，但我无法删除它周围的空白区域，这就是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>

<head>
<style type="text/css">
.header{background:url(http://likenation.com/theme/pes/images/header_bar.png) repeat-x;border-bottom:1px solid #131619;height:56px}
.header-content{width:1000px;margin:auto}
</style>
</head>
<body>
<div class="header">
    <div class="header-content">
        Test
    </div>
</div>
</body>
</html>

这就是标题的样子：http://gyazo.com/b71ad68c24c2bdb49619a44c551918c5.png

如果有人能帮我解决这个问题，我真的很感激。

修改

由于我无法回答我自己的问题，我将在此发布：

我补充说：

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

并且它有效，感谢帮助人员！

Answer 1

您需要将html / body上的填充/边距清零：

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

我可能会使用proper reset。

Answer 2

将此添加到您的CSS：

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

Answer 3

您需要reset浏览器设置的默认CSS;一个简单的方法是：

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

如果您想重置更多/所有元素，可以在http://www.cssreset.com/

查看严重的CSS重置文件

Answer 4

body存在隐式边距和填充，这取决于浏览器到浏览器。作为一种良好做法，您可以将margin:0和padding:0添加到正文元素

如何删除标题图像周围的空白？

4 个答案: