如何解决我怎样才能摆脱底部的额外空间?
我仍然不熟悉编码,我想知道我是否做错了什么。 有没有办法可以摆脱文本下方底部的所有额外空间? 这是 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>
如果你能帮忙,请告诉我。谢谢
解决方法
您的 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。