行之间的CSS网格间距
行之间的CSS网格间距
提问于 2020-07-05 08:34:20
我正在尝试学习如何使用网格布局。我需要让我的网格占据整个页面，但是由于某种原因，导航栏(第一行)和第二行之间有一个额外的空间。我如何去掉空格，使得第一行和第二行之间只剩下我指定的网格间距。
* {
margin: 0px;
padding: 0px;
}
#grid-layout {
display: grid;
grid-gap: 6px;
grid-column: 1fr 1fr 1fr 1fr;
grid-row: 60px auto auto auto 30px;
width: 100vw;
height: 100vh;
grid-template-areas: "nav nav nav nav" "top-post top-post post-2 post-3" "top-post top-post post-4 post-5" "newsletter newsletter newsletter newsletter" "ft ft ft ft";
}
.nav-bar {
grid-area: nav;
display: flex;
flex-direction: row;
border: 1px solid red;
align-items: center;
height: 100px;
padding: 10px;
}
.website-title {
width: 40%;
justify-content: flex-start;
}
.nav-bar-list {
display: flex;
flex-direction: row;
width: 60%;
justify-content: flex-start;
margin: 0px;
}
.nav-bar-item {
margin-right: 50px;
}
.main-post {
grid-area: top-post;
border: 1px solid red;
width: 100%;
height: 100%;
}
#post2 {
grid-area: post-2;
border: 1px solid red;
}
#post3 {
grid-area: post-3;
border: 1px solid red;
}
#post4 {
grid-area: post-4;
border: 1px solid red;
}
#post5 {
grid-area: post-5;
border: 1px solid red;
}
.newsletter {
grid-area: newsletter;
border: 1px solid red;
}
#footer {
grid-area: ft;
border: 1px solid red;
text-align: center;
align-items: center;
padding: 5px;
margin: 0px;
height: 30px;
}<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="index.css">
<meta charset="utf-8">
</head>
<body>
<div id="grid-layout">
<nav class="nav-bar">
<div class="website-title">Title</div>
<ul class="nav-bar-list">
<li class="nav-bar-item">Home</li>
<li class="nav-bar-item">Blog</li>
<li class="nav-bar-item">About</li>
</ul>
</nav>
<section class="main-post">
<div class="text-gradient">
<a href="#">
<h4>Main Post Here</h4>
</a>
<p>Main Post Summary here</p>
<a href="#" class="main-post-button">Read More</a>
</div>
</section>
<section class="post" id="post2">
<a href="#" class="link">
<div class="text-gradient">
<h4>Post 2 Here</h4>
<p>Post 2 subtitle</p>
</div>
</a>
</section>
<section class="post" id="post3">
<a href="#" class="link">
<div class="text-gradient">
<h4>Post 3 Here</h4>
<p>Post 3 subtitle</p>
</div>
</a>
</section>
<section class="post" id="post4">
<a href="#" class="link">
<div class="text-gradient">
<h4>Post 4 Here</h4>
<p>Post 4 subtitle</p>
</div>
</a>
</section>
<section class="post" id="post5">
<a href="#" class="link">
<div class="text-gradient">
<h4>Post 5 Here</h4>
<p>Post 5 subtitle</p>
</div>
</a>
</section>
<section class="newsletter">
<form action="#">
<h5>Subscribe to our Newsletter</h5>
<div class="newsletter-container">
<div class="newsletter-element">
<input type="text" placeholder="Name" name="name" required>
</div>
<div class="newsletter-element">
<input type="text" placeholder="Email address" name="mail" required>
</div>
<div class="newsletter-element">
<input type="submit" value="Subscribe">
</div>
</div>
<!-- newletter container -->
</form>
</section>
<footer id="footer">
<div>
<p>All Right Reserved</p>
</div>
</footer>
</div>
</body>
</html>
回答 3
Stack Overflow用户
发布于 2020-07-05 08:53:37
.nav-bar{
grid-area: nav;
display: flex;
flex-direction: row;
border: 1px solid red;
align-items: center;
height: 100px;
padding: 10px;
}您的css代码中有padding:10px，padding属性在应用.nav-bar标记时增加了一些空白，您必须将其更改为padding:0px或将其完全删除
Stack Overflow用户
发布于 2020-07-05 18:15:56
我想问题出在你的“´´´
Stack Overflow用户
发布于 2020-07-06 20:02:49
这是一个打字错误，而不是"grid-template-column“"grid-template-row”我有"grid-column“"grid-row”
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62735746
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号