如何解决网格不完全适合屏幕的问题？

Question

我非常不熟悉CSS和HTML，这是我在课堂之外的第二个合适的网站。据我所知，我的风格很不合常规，因为我更喜欢使用网格，而不是根据对象的位置固定对象。因此，结果，我在使网格框完全适合屏幕时遇到了问题，以便网格的颜色可以利用整个屏幕。

我尝试使用100vh / vw和100％。不知道考虑可以在网上找到的有限信息的其他方法]

.ttl {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: "g1";
    height: 100vh;
    width: 100%;
    background-color: #FC7146;
    justify-self: center;
}

.title {
    grid-area: g1;
    justify-self: center;
    align-self: center;
    text-align: center;
    color: white;
    z-index: 1;
    font-family: 'MyWebFont', Fallback, sans-serif;
    font-variant: small-caps;
    letter-spacing: 7px;
    font-size: 100px;
}

我只是试图确保颜色适合整个屏幕，因为当前不适合。

Answer 1

在加载CSS之前，浏览器会在每个文档上应用一些预定义的样式。这称为浏览器样式表。它包括样式按钮的规则，h1-h6和p元素的默认边距和字体大小等。

浏览器样式表可能在body元素上包含边距或填充。这里就是这种情况。

只需添加

body {
  margin: 0;
  padding: 0;
}

[您还可以使用normalize.css之类的插件来使CSS在多个浏览器中看起来相似。https://necolas.github.io/normalize.css/