我怎样才能摆脱底部的额外空间？答案

【问题标题】：How can I get rid of the extra space at the bottom?我怎样才能摆脱底部的额外空间？
【发布时间】：2021-07-13 17:49:50
【问题描述】：

我还是编码新手，我想知道我是否做错了什么。有没有办法可以摆脱文本下方底部的所有额外空间？这是 HTML。

@import url('https://fonts.googleapis.com/css?family=Montserrat');
body {
    background-color: WHITE;
    width:100%;
    height:100vw;
    padding:0;
    margin:0;
}

.title {
    font-family: "Montserrat";
    text-align: center;
    color: #FFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding:0;
    margin:0;
    letter-spacing: 1.7px;
}

h1 {
    background-image: url(https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif);
    background-size: cover;
    color: transparent;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    text-transform: uppercase;
    font-size: 120px;
    line-height: 1.01;
    margin: 40px 0;
    padding:0;
}

@media only screen and (max-width: 760px) {
  h1 {
    font-size: calc(3.35rem + 1vw);
  }
 }

@media only screen and (max-width: 457px) {
  h1 {
    font-size: calc(2.5rem + 1vw);
    
    }
  
 
}

<div class="title">
 <h1>Welome<br/>TO<br/>Website<br/>name</h1>

如果你能帮忙，请告诉我。谢谢

【问题讨论】：

或者如果有人可以在屏幕较小时帮助调整字体大小，那就太好了。谢谢
去除身体的高度
@TemaniAfif 这对桌面视图很有帮助，但是当它是移动设备时，它是如此之小且不居中
@TemaniAfif 这就是手机的样子imgur.com/a/Nc5qprC

标签： html css hide mobile-website

【解决方案1】：

您的 h1 元素的 margin 值为 40px 0，这意味着它将具有 40 像素的上下边距和 0 像素的左右边距。这是more info on writing short-hand margin properties。删除底部边距的正确 margin 值将是 40px 0 0。

你也忘了关闭你的div标签：

<div class="title">
 <h1>Welome<br/>TO<br/>Website<br/>name</h1>
</div>

【讨论】：

谢谢看来还是有问题。我仍然看到滚动条，并且文本下方还有多余的空间
@amoney73 body 的样式规则 height 为 100vw。我认为您可能想要 100vh，或者根本不需要 height 规则。 vw 与视口宽度相关，vh 与视口高度相关
这对桌面视图有帮助，但是当它移动时它是如此之小且不居中，抱歉我一直在问问题
这就是手机的样子imgur.com/a/Nc5qprC