HTML/CSS - 如何删除周围的空白？ [复制]答案

【问题标题】：HTML/CSS - How to remove the white spaces around? [duplicate]HTML/CSS - 如何删除周围的空白？ [复制]
【发布时间】：2017-02-25 09:32:00
【问题描述】：

我想去除周围的空白（如图所示，每个角落都有很厚的空白），我该怎么做？它似乎是默认创建的，需要做一些事情来删除它。我尝试添加边距：-10px，但它看起来不是正确的做法，因为它弄乱了以下内容的视图。

这是我的代码：

header, footer {
    padding: 1em;
    color: white;
    font-family: "Calibri";
    background-color: #000000;
    clear: left;
    text-align: center;
}

/* Navbar start */
ul.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    font-family: "Calibri";
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
    background-color: #111;

}

.active {
    background-color: #009933;
}
/* Navbar end */

nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
}

nav li {
    float: none;
}
nav ul {
    list-style-type: disc;
    padding: 0;
    margin: 10px;
}

nav ul a {
    text-decoration: none;
}

article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<header>
   <h1>Header</h1>
</header>
  
<ul class="navbar">
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#">Peripherals</a></li>
  <li><a href="#">Gallery</a></li>
  <li><a href="#about">About</a></li>
</ul>

<nav>
	<ul>
		<li>Item1</li>
		<li>Item2</li>
	</ul>
</nav>

<article>
	<h1>Item1</h1>
	<p>Description for item1 here.</p>
</article>


<footer>Copyright (c) KPA</footer>

</body>

</html>

【问题讨论】：

尝试在 body 和 html 上设置 margin/padding 为 0
哦，成功了！从来不知道这么简单。谢谢！
任何时候，我都建议使用 THCoder 建议的 CSS 重置
@KPA 你还需要编辑你的代码。你在 body 之后关闭了 head 标签。 head 标签需要在 body 标签开始之前关闭。

标签： html css

【解决方案1】：

问题是你的 body 元素的边距。设置成这样

body {margin: 0;}

【讨论】：

【解决方案2】：

css reset

这个由 eric meyer 重置的 CSS 简直太棒了。它将删除这些空格。

另一种方法是设置

margin: 0;
padding: 0;

【讨论】：

我只使用了 margin: 0 并且它似乎工作，我可以知道填充是做什么的吗？
有些浏览器，比如 Opera，不使用边距。相反，他们使用填充使这些空间出现在您的文档中。所以为了安全起见，只需将边距和内边距都设置为 0。
内边距位于内容和边框之间。边距在边界之后。检查此以获取更多信息w3schools.com/css/css_boxmodel.asp
通常，浏览器会在文档周围设置大约 8 像素的边距或内边距。像 Chrome 或 Firefox 这样的浏览器，他们使用保证金来做到这一点。但是像 Opera 这样的浏览器，它们使用填充在文档周围留出 8px 的空间。希望对您有所帮助！
@THCoder - Opera 的哪些版本？没有现代版本的 Opera 使用填充。

【解决方案3】：

您必须在页面顶部添加线条样式 css。

html,body{ 边距：0}

【讨论】：

【解决方案4】：

您可以使用CSSReset library 或：

body {
   margin: 0;
   padding: 0;
}

【讨论】：

【解决方案5】：

试试

.article{ 
padding: 0em;
}

与.nav{padding: 0em;}类似

【讨论】：

试试 .body {margin: 0;}