Html CSS：主要内容应该有背景色

我正在制作一个通用的页眉和页脚，它将在所有HTML页面中使用。我的页面有白色的页眉和页脚，正文是灰色的。现在，我的工作要求达到以下目标：

到目前为止，我取得的成就如下：

我不知道为什么我在身体标签的两侧会有这些白色的条纹。请建议，我的代码如下

main{
背景颜色：浅灰色；
填充：50px；
}
标题{
背景色：白色；
宽度：100%；
高度：50px；
}
.内容部分{
背景颜色：浅灰色；
宽度：100%；
}
.标志{
高度：20px；
利润率：15px 5px；
宽度：116px；
}
.开放式银行卡背景{
字体大小：300；
保证金：0自动；
宽度：65%；
填充：20px 40px；
对象匹配：包含；
最大宽度：325px；
最小高度：200px；
边界半径：5px；
显示：表格；
背景色：白色；
位置：相对位置；
盒影：0 1px 3px 0 rgba（0,0,0,0.2）；
}
.打开卡BG:：之后{
内容：''；
位置：绝对位置；
顶部：30px；
左：100%；
宽度：30px；
高度：30px；
背景：url（../secure.svg）中心不重复；
背景尺寸：包含；
}

主要内容
我是页脚

这是因为浏览器在

body

标记上应用了默认值（用户代理样式表）

边距

-请参见当我为

body

设置

边距：0

时，白色条纹如何消失

演示如下：

正文{
保证金：0；
}
主要{
背景颜色：浅灰色；
填充：50px；
}
标题{
背景色：白色；
宽度：100%；
高度：50px；
}
.内容部分{
背景颜色：浅灰色；
宽度：100%；
}
.标志{
高度：20px；
利润率：15px 5px；
宽度：116px；
}
.开放式银行卡背景{
字体大小：300；
保证金：0自动；
宽度：65%；
填充：20px 40px；
对象匹配：包含；
最大宽度：325px；
最小高度：200px；
边界半径：5px；
显示：表格；
背景色：白色；
位置：相对位置；
盒影：0 1px 3px 0 rgba（0,0,0,0.2）；
}
.打开卡BG:：之后{
内容：''；
位置：绝对位置；
顶部：30px；
左：100%；
宽度：30px；
高度：30px；
背景：url（../secure.svg）中心不重复；
背景尺寸：包含；
}

主要内容
我是页脚

在样式表中添加

正文{margin:0}

。 默认情况下，在大多数主流浏览器中，

body

标记的边距为

8px

正文{
保证金：0
}
主要{
背景颜色：浅灰色；
填充：50px；
}
标题{
背景色：白色；
宽度：100%；
高度：50px；
}
.内容部分{
背景颜色：浅灰色；
宽度：100%；
}
.标志{
高度：20px；
利润率：15px 5px；
宽度：116px；
}
.开放式银行卡背景{
字体大小：300；
保证金：0自动；
宽度：65%；
填充：20px 40px；
对象匹配：包含；
最大宽度：325px；
最小高度：200px；
边界半径：5px；
显示：表格；
背景色：白色；
位置：相对位置；
盒影：0 1px 3px 0 rgba（0,0,0,0.2）；
}
.打开卡BG:：之后{
内容：''；
位置：绝对位置；
顶部：30px；
左：100%；
宽度：30px；
高度：30px；
背景：url（../secure.svg）中心不重复；
背景尺寸：包含；
}

主要内容
我是页脚

您可以尝试为

main

标记设置

边距：0-10px

，这样可以解决您的问题

---

您可以在css中添加以下代码：

body {
    display: initial;
}

请尝试以下操作：

---

html，body{margin:0；}

既然一个人应该接受答案，而且这真的是一个很好的方法，既能提升质量内容，又能激励用户为你未来的问题提供有用的答案，那么我可以问你为什么不这样做吗？顺便问一下，这段代码只针对Chrome吗。。。问：因为你的代码在Chrome和Firefox/Edge以及IE上呈现不同，而在IE上则完全混乱这解决了问题：）谢谢这解决了问题：）谢谢IE仍然是主流浏览器，我发现很重要的一点是，告诉我这在itLet中不起作用，让我知道你是否用它更新，我将收回我的downvotedDisplay首字母不同于浏览器，在这种情况下，你可以添加display:inline；它在所有主流浏览器中都会起作用。我的评论不是要改变

显示

值来抵消页边空白，因为给定的答案需要额外的注释。它在IES中不起作用。当你开始解释某些东西为什么起作用时，你也会得到投票