CSS全角标头（全角，看不到正文背景）

Question

我已经多次问过这个问题，但是当我尝试实现他们的解决方案时，它似乎没有用。

我目前开始使用外部样式表涉足HTML和CSS。

我使用以下内容创建了一个容器（边界只是为了帮助我了解容器）：

 header{ width: 100%; height:100%; margin: 0 0 0 0; background: lightgrey; border: solid red; } header>h1{ color:black; border: solid blue; margin: 0px 0px 0px 0px; } header>p{ font-style: italic; text-align: left; color:white; border: solid yellow; margin: 0px 0px 0px 0px; } 

 <header> <h1>My Web Space</h1> <p> First HTML Page using Sublime Text</p> </header> 

但是，当我在网页中运行它时，标头的宽度不是浏览器窗口的100％。 我仍然可以在顶部，左侧和右侧看到身体背景的一些粘液部分（在这种情况下为红色）。

我设置了sliderhomepage的高度和背景以呈现效果

Answer 1

添加到您的CSS：

    *{
margin:0;
padding:0:
  box-sizing:border-box;
}
body{
width:100%;
max-width:100%;
height:100%;
}
header{
    height:100%;
    margin:0;
    background: lightgrey;
    border:2px  solid red;
}

看到它的工作：

 *{ margin:0; padding:0: box-sizing:border-box; } body{ width:100%; max-width:100%; height:100%; } header{ height:100%; margin:0; background: lightgrey; border:2px solid red; } header>h1{ color:black; border: solid blue; margin: 0px 0px 0px 0px; } header>p{ font-style: italic; text-align: left; color:white; border: solid yellow; margin: 0px 0px 0px 0px; } 

 <header> <h1>My Web Space</h1> <p> First HTML Page using Sublime Text</p> </header> 

Answer 2

这是因为您尚未设置任何正文或文档的边距或样式。

您需要为正文或全局选择器设置hr裕度并将padding设置为0。

 *{
     margin: 0;
     padding: 0;
  }

https://jsfiddle.net/f4x4dm09/2/