我在我的页面上工作，我看到右边有一个很大的空白区域，我可以看到它在移动滚动条。我怎样才能删除它？
这是我的代码:
`<!doctype html>
<html>
<head>
<title>Agenda - Central de Estudos</title>
<meta charset="utf-8">
<meta name="author" content="Bruno M. B. Sdoukos">
<meta name="description" content="Central de estudos. Todas as matérias. Temas abordados em sala de aula.">
<meta name="keywords" content="estudo, matéria, escola">
<link rel="stylesheet" href="G:/TRABALHOS/Central de estudos - Arquivos/header_style.css">
<link rel="stylesheet" href="G:/TRABALHOS/Central de estudos - Arquivos/footer_style.css">
<style>
h1{text-align: center;}
h2{font-size: 18px;}
article{
margin: 30px;
height: 721.5px;
}
@font-face{
font-family: Sepet;
src: url(G:/Programação/Webdesign/Curso-de-Webdesign/Projeto-Fashion/Fontes/Sepet.ttf);
}
article img{
width: 700px;
position: absolute;
bottom: 250px;
left: 900px;
}
.handwriting{
font-family: Sepet;
font-size: 30px;
position: relative;
left: 1000px;
bottom: 150px;
}
.handwriting a{
text-decoration: none;
}
</style>
</head>
<body>
<header>
<h1>Central de Estudos<span> <a href="file:///G:/TRABALHOS/Central de Estudos - Arquivos/index-login-on.html">Início</a> <a href="#">Matérias</a> <a href="file:///G:/TRABALHOS/Central%20de%20estudos%20-%20Arquivos/Exerc%C3%ADcios.html">Exercícios</a> <a href="file:///G:/TRABALHOS/Central%20de%20estudos%20-%20Arquivos/Agenda.html">Agenda</a> <a href="file:///G:/TRABALHOS/Central%20de%20estudos%20-%20Arquivos/Login-login-on.html">Login</a></span></h1>
<img src="https://cdn.pixabay.com/photo/2018/07/20/12/26/earth-3550553_960_720.png" alt="Globo escolar">
</header>
<main>
<article>
<h1>Agenda</h1>
<hr>
<h2>Tarefas</h2>
<ul>
<li>25/03/2019 | Ciências | Livro - Pg. 17 Ex. 7</li>
<li>26/03/2019 | Português | Livro - Pg. 46</li>
<li>26/03/2019 | Geografia | Caderno - Atividade 07</li>
</ul>
<h2>Provas</h2>
<ul>
<li>26/03/2019 | Artes | Conteúdos abordados (diversos)</li>
<li>01/04/2019 | Ciências | O ser humano (visão geral) e a célula (visão geral)</li>
</ul>
<h2>Entrega de trabalhos</h2>
<p>Não há trabalhos para entrega no momento.</p>
<img src="https://cdn.pixabay.com/photo/2012/04/18/14/41/opened-37229_960_720.png">
<p class="handwriting"><a href="#">Aulas</a></p>
</article>
</main>
<footer>
<p>Autoria do site de Bruno M. B. Sdoukos.</p>
<p>Copyright © 2019</p>
</footer>
</body>
</html>`
我认为边距没有问题，我已经尝试在“样式”中添加“边距:0”，但并没有解决问题。
Obs:该页面在我电脑的文件中，所以我不能把它的 URL 放在这里。
最佳答案
自己调试的一种方法是添加以下 CSS 规则:
* {
border: 1px solid red;
}
这样做会立即显示哪些元素负责滚动。
有 2 个元素由于其较大的 left 属性值而导致水平滚动。要么删除这些大值，要么重新考虑您的布局以适应起始视口(viewport)。
article img {
width: 700px;
position: absolute;
bottom: 250px;
left: 900px; /* <-- Causing horizontal scroll */
}
.handwriting {
font-family: Sepet;
font-size: 30px;
position: relative;
left: 1000px; /* <-- Causing horizontal scroll */
bottom: 150px;
}
关于html - 如何从我的页面中删除一大片空白区域？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55407792/