Html 尝试修复垂直对齐的div之间的间隙_Html_Css

Html 尝试修复垂直对齐的div之间的间隙

html css

Html 尝试修复垂直对齐的div之间的间隙,html,css,Html,Css,我正在尝试对齐一些div，以便在每个悬停的顶部有6个div，分布在页面的整个高度上，文本居中。例如：到目前为止，我所做的一切都不起作用，它只是扩展了页面。我已经做了一个div（可以很容易地更改所有这些框中的文本），它围绕着它们，并且有一个height:100vh的值。出于某种原因，div之间似乎存在间隙。我已经剥离了所有代码，只保留了portfolio div，但上面还有一个缺口代码如下： <!DOCTYPE html> <html> <head>

我正在尝试对齐一些div，以便在每个悬停的顶部有6个div，分布在页面的整个高度上，文本居中。例如：

到目前为止，我所做的一切都不起作用，它只是扩展了页面。我已经做了一个div（可以很容易地更改所有这些框中的文本），它围绕着它们，并且有一个

height:100vh的值。出于某种原因，div之间似乎存在间隙。我已经剥离了所有代码，只保留了portfolio div，但上面还有一个缺口
代码如下：
<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">

 <style>
        body {
    margin: 0;
    padding: 0;
    top: 0;
}

a {
    padding: 0;
    margin: 0;
    text-decoration: none;
    color: black;
}
.navigation-bar {
    float: left;
    width: 350px;
    font-size: 40px;
    height: 100vh;
    text-align: center;
}

.portfolio {
    background-color: #909090;
    height: 16%;
    line-height: 16%;
}

.twitter {
    background-color: #a0a0a0;
    height: 16%;
}

.git-hub {
    background-color: #909090;
    height: 16%;
}

.email {
    background-color: #a0a0a0;
    height: 16%;
}

.linkedin {
    background-color: #909090;
    height: 16%;
}

.about-me {
    background-color: #a0a0a0;
    height: 16%;
}

</head>

<body>
    <div class="navigation-bar">
        <a href="#">
            <div class="portfolio">
                <h3>Portfolio</h3>
            </div>
        </a>
        <a href="#">
            <div class="twitter">
                <h3>Twitter</h3>
            </div>
        </a>
        <a href="#">
            <div class="git-hub">
                <h3>Github</h3>
            </div>
        </a>
        <a href="#">
            <div class="email">
                <h3>Email</h3>
            </div>
        </a>
        <a href="#">
            <div class="linkedin">
                <h3>LinkedIn</h3>
            </div>
        </a>
        <a href="#">
            <div class="about-me">
                <h3>About Me</h3>
            </div>
        </a>   
    </div>
</body>

</html>


身体{
保证金：0；
填充：0；
排名：0；
}
a{
填充：0；
保证金：0；
文字装饰：无；
颜色：黑色；
}
.导航栏{
浮动：左；
宽度：350px；
字体大小：40px；
高度：100vh；
文本对齐：居中；
}
.投资组合{
背景色：#909090；
身高：16%；
线高：16%；
}
.推特{
背景色：#A0；
身高：16%；
}
.git中心{
背景色：#909090；
身高：16%；
}
.电邮{
背景色：#A0；
身高：16%；
}
.linkedin{
背景色：#909090；
身高：16%；
}
.关于我{
背景色：#A0；
身高：16%；
}

谢谢你的帮助，我没有足够高的声誉来发布图片，所以如果有人能编辑我会很感激的
编辑：这里有一个提示：
您需要删除标题中的内置边距

您需要删除标题中的内置边距

这是因为h3浏览器给了它一个默认的边距。因此，添加h3{margin:0；}
应该可以满足您的需要
*或者。导航栏h3{margin:0}
如果你不想弄乱布局的其余部分。
这是因为h3浏览器给了它一个默认的边距。因此，添加h3{margin:0；}
应该可以满足您的需要
*或者。导航栏h3{margin:0}
，如果您不想弄乱布局的其余部分。
未使用内联块的可能副本。未使用内联块的可能副本。谢谢。如果你接受了我的回答，你至少可以给保利一票——他的更快；）嗨，我试着提高两个答案，但我没有足够的声誉，我需要15个，我只有3个。很抱歉谢谢如果你接受了我的回答，你至少可以给保利一票——他的更快；）嗨，我试着提高两个答案，但我没有足够的声誉，我需要15个，我只有3个。很抱歉
h3 {
    margin: 0;
}