Question

我想去掉周围的白色空间（正如你在图像中看到的那样，每个角落都有一个厚厚的白色空间），我该怎么做？它似乎是默认创建的，需要做些什么来删除它。我试图添加保证金：-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>

Answer 1

问题是你的身体元素的边缘。像这样设置

body {margin: 0;}

Answer 2

css reset

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

另一种方法是设置

margin: 0;
padding: 0;

Answer 3

您必须在页面顶部添加线型css。

html，body {margin：0}

Answer 4

您可以使用CSSReset library或：

body {
   margin: 0;
   padding: 0;
}

Answer 5

尝试

.article{ 
padding: 0em;
}

与.nav{padding: 0em;}

类似

HTML / CSS - 如何删除周围的空白区域？

5 个答案: