css-如何修复页脚和html正文结尾之间的间隙?
发布时间:2022-04-19 10:49:24 380
相关标签: # vue.js# css
我在页面中添加了一个页脚,但由于某些原因,页脚和正文结尾之间存在间隙。我不知道如何解决这个问题。我已经制作了很多没有这个问题的网页。
我已经包含了我创建的HTML和CSS。我找不到我的代码有任何问题。
HTML:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-size: 20px;
font-weight: 300;
margin: 0 0 var(--header-height) 0;
}
section {
margin-top: 3rem;
}
.coloredSection {
background-color: var(--pale-green);
color: white;
}
.container {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
.grid {
display: grid;
gap: 1.5rem;
}
<footer id="contact" class="coloredSection contact">
<div class="row align-items-center projects container">
<div>
<h1>Contact Me</h1>
</div>
<div class="contactLinks" id="contacts">
<a
id="profile-link"
href="https://github.com/"
target="_blank"
class="btn contactDetails"><i class="fab fa-github"></i> GitHub</a>
<a
href="https://twitter.com/"
target="_blank"
class="btn contactDetails"><i class="fab fa-twitter"></i> Twitter</a>
<a
href="https://www.linkedin.com/in/"
target="_blank"
class="btn contactDetails"><i class="fab fa-linkedin"></i> LinkedIn</a>
<a href="mailto:"
class="btn contactDetails"><i class="fas fa-envelope"></i> Email me</a>
</div>
<div class="attribution">
©2022 | Designed and Coded by Kianna Hendricks
</div>
</div>
</footer>
<!-- End Contact -->
</body>
</html>
特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报