内容部分在滚动时显示额外的空白间距

Question

header{
    position: fixed;
    width: 100%;
    height: 57px;
    top: 0;
    background-color: gainsboro;
    float: left;
    right: 0;
}
article {
    /*position: fixed;*/
    width: 100%;
    background-color: deepskyblue;
    float: left;
    right: 0;
    margin-top: 57px;
    margin-bottom: 48px;
    /*height: 100%;*/
    }
footer{
    width: 100%;
    height: 48px;
    position: fixed;
    bottom: 0;
    float: left;
    right: 0;
    background-color: yellow;
}

<header>
        </header>
        <article>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p><p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
        </article>
        <footer>
        </footer>

在上面的代码中，我尝试将顶部和标题部分始终固定在各自的位置，并且内容部分可以根据其长度滚动。

1. 我面临的问题是，当滚动条向上移动时，会显示一个空白。我不知道如何处理，有时也会显示在底部
2. 我面临的另一个问题是内容部分的额外填充。我将属性值 right:0 赋予了文章。但它仍然显示一些填充。

如何解决这两个问题？

Answer 1

在大多数主流浏览器中，默认的正文边距为 8px。它由浏览器提供的用户代理样式表以像素为单位进行定义。

你只需要为 body 添加 css：

body {
  margin: 0px;
  padding: 0px;      
}

但如果您有一个大型项目并想要更完整，请使用normalize.css。它重置了许多默认值以在浏览器之间保持一致。

Answer 2

首先你必须像这样通过边距和填充来规范化 HTML 元素

*{
margin:0px;
padding:0px;
}