HTML/CSS奇怪的div间距

在改进我网站的横幅/导航栏时，我发现div之间存在一些奇怪的间距。这里有两个链接显示了我在JSFIDLE中遇到的问题 我使用php来确定要显示的内容，所以我需要两个来演示这两种可能性的问题

我花了大约3个小时摆弄代码，试图找出发生了什么以及如何修复它，但没有用。我似乎无法确定问题的起因

编辑：我觉得奇怪的是绿色和黑色边框之间的间隙

我的代码来自JSFIDLE：

链接1 HTML:

<div id="banner">
    <div id="bannerleft"></div>
    <div id="bannercenter">
        <div id="nav_content">
            <ul>
                <li>
                    <div><a href="../">Home</a>
                    </div>
                </li>
                <li>|</li>
                <li>
                    <div><a href="forum">Forums</a>
                    </div>
                </li>
                <li>|</li>
                <li>
                    <div><a href="market">Market</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div id="bannerright">
        <div id=accountcontent> <span><a href="login">Login</a> | <a href="register">Register</a></span>

        </div>
    </div>
</div>

链接2 HTML:

<div id="banner">
    <div id="bannerleft"></div>
    <div id="bannercenter">
        <div id="nav_content">
            <ul>
                <li>
                    <div><a href="../">Home</a>
                    </div>
                </li>
                <li>|</li>
                <li>
                    <div><a href="forum">Forums</a>
                    </div>
                </li>
                <li>|</li>
                <li>
                    <div><a href="market">Market</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div id="bannerright">
        <div id=accountcontent><a href="account"><img id="avatarsmall" src=""/>AccountName</a>
        </div>
    </div>
</div>

将垂直对齐：顶部添加到bannercenter：

默认情况下，包括CSS显示的表格单元格：表格单元格具有垂直对齐：中间，因此，如果有任何同级表格单元格具有较高的内容，简而言之，非高单元格将显示在垂直中间。

将垂直对齐：顶部添加到bannercenter:

默认情况下，包括CSS显示：表格单元格在内的表格单元格具有垂直对齐：中间，因此，如果有任何同级表格单元格具有较高的内容，简而言之，非高单元格将显示在垂直中间。

快速修复，使用垂直对齐：顶部作为bannercenter，这是不推荐的。如果您想按照语义、可读性来做，请继续阅读

我不确定您到底想要实现什么，但使用上下文类将对您有所帮助。我怀疑您的问题与行高和边距有关。解决方法是使线高度：1；保证金：0；对于两个s。使用display:table或display:table单元格也不是一个好主意。而是使用内联块或flexbox

.parent{边框：1px蓝色虚线；文本对齐：居中；} .child one{显示：内联块；边框：1px红色虚线；边距：0 5px；填充：5px；宽度：33%；} .child two{显示：内联块；边框：1px绿色虚线；边距：0 5px；填充：5px；宽度：33%；} 家 办公室 快速修复，使用垂直对齐：顶部作为bannercenter，这是不推荐的。如果您想按照语义、可读性来做，请继续阅读

我不确定您到底想要实现什么，但使用上下文类将对您有所帮助。我怀疑您的问题与行高和边距有关。解决方法是使线高度：1；保证金：0；对于两个s。使用display:table或display:table单元格也不是一个好主意。而是使用内联块或flexbox

.parent{边框：1px蓝色虚线；文本对齐：居中；} .child one{显示：内联块；边框：1px红色虚线；边距：0 5px；填充：5px；宽度：33%；} .child two{显示：内联块；边框：1px绿色虚线；边距：0 5px；填充：5px；宽度：33%；} 家 办公室

---

你觉得奇怪的是什么？你指的是bannercenter div和navcontent网格之间底部的间隙吗？虚线边框也勾勒出了绿色边框和黑色边框之间的间隙，对不起，我应该澄清一下，你认为奇怪的是什么？你指的是bannercenter div和navcontent网格之间底部的间隙吗？这也是由虚线边框勾勒出来的绿色边框和黑色边框之间的间隙，对不起，我应该说清楚谢谢你，我稍微调整了一下样式，使之符合我的要求，但这很完美。谢谢你，我稍微调整了样式，使其符合我的要求，但这很完美。

<div id="banner">
    <div id="bannerleft"></div>
    <div id="bannercenter">
        <div id="nav_content">
            <ul>
                <li>
                    <div><a href="../">Home</a>
                    </div>
                </li>
                <li>|</li>
                <li>
                    <div><a href="forum">Forums</a>
                    </div>
                </li>
                <li>|</li>
                <li>
                    <div><a href="market">Market</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div id="bannerright">
        <div id=accountcontent><a href="account"><img id="avatarsmall" src=""/>AccountName</a>
        </div>
    </div>
</div>

#banner {
    height: 30px;
    width: 100%;
    display: table;
    margin-bottom: 20px;
}
#bannerleft {
    display: table-cell;
    text-align: left;
    outline-color: black;
    outline-style: dashed;
    width: 33.33%;
}
#bannercenter {
    display: table-cell;
    text-align: center;
    outline-color: black;
    outline-style: dashed;
    padding: 0px;
    height:30px;
    width: 33.33%;
}
#nav_content {
    height: 30px;
    margin: 0 auto;
    padding: 0px;
    outline-color: green;
    outline-style: dashed;
}
#nav_content ul {
    height: 30px;
    margin: 0 auto;
    padding: 0px;
}
#nav_content ul li {
    display: inline-block;
    list-style: none;
    line-height: 30px;
}
#nav_content ul li div {
    height: 30px;
}
#bannerright {
    display: table-cell;
    text-align: center;
    outline-color: black;
    outline-style: dashed;
    padding: 0px;
    height:30px;
    width: 33.33%;
}
#accountcontent {
    outline-color: green;
    outline-style: dashed;
    height:30px;
}
#avatarsmall {
    height: 30px;
    width: 30px;
    padding: 0px;
    margin: 0px;
}