Question

很抱歉，如果我的问题有点太具体，但我还没有找到答案。在我的网站上，有一个标题应该占据屏幕的整个宽度，但事实并非如此。顶部和侧面之间始终存在空白区域。我尝试了display: block; min-width: 100%，只是width: 100%以及更多变种，但我无法找到如何摆脱它。有人有想法吗？谢谢！

完整代码

/* GLOBAL */

body {
  /*background-color: #1abc9c;
	display: block;
	min-width: 100%;*/
}
#content {} header {
  display: block;
  min-width: 100%;
  height: 100px;
  background-color: #34495e;
  border-top: 5px solid #1abc9c;
}

<!DOCTYPE html>
<html>

<head>
  <title>Example Website</title>

</head>

<body>
  <div id="content">

    <header>

      <img src="REPLACE.png" />

    </header>

  </div>
</body>

</html>

Answer 1

默认情况下，浏览器会向body元素添加一些边距。因此，要修复此问题，请将margin:0;添加到您的正文CSS。

body {
  margin:0;
}

JSfiddle demo

为什么我的标题不占用页面的整个宽度？

1 个答案: