Html 为什么第二个元素有余量？

我有两个div元素，分别是logo和user

我希望它们有完整的高度，但是user元素似乎有非零的

页边顶部

为什么会发生这种情况？如何修复？
您应该添加所选样式位置：已修复；和溢出：隐藏；
像这样

.logo {
    display: inline-block;
    font-size: 20px;
    color: white;
    text-decoration: none;
    height: 100%;
    width: 100px;
    border: 1px solid yellow;
}

.logo a {
    color: white;
    text-decoration: none;
}

.user {
    display: inline-block;
    height: 100%;
    width: 100px;
    border: 1px solid yellow;
}

.user a {
    color: white;
}

这是因为显示：内联块；哪种内容默认边距，以避免在CSS中使用float:left边距

>  .user {
>     display: inline-block;
>     border: 1px solid yellow;
>     position: fixed;
>     width: 100px;
>     overflow: hidden; }

或者您可以查看这篇有用的文章
欢迎来到StackOverflow。能否提供HTML代码？使用
显示：内联块
，子元素的底边对齐。尝试在导航栏的
div
子项上使用
vertical align:top
。这应该像你想要的那样对齐顶部边缘。如果目的是有不同的字体大小呢？我更改了描述，现在我们可以使用行高，一切都可以。转到问题顶部的重复链接了解为什么OP是他们的问题。转到问题顶部的重复链接了解为什么OP是他们的问题。
.logo {
    float:left
    font-size: 20px;
    color: white;
    text-decoration: none;
    height: 100%;
    width: 100px;
    border: 1px solid yellow;
}

.logo a {
    color: white;
    text-decoration: none;
}

.user {
    float:left
    height: 100%;
    width: 100px;
    border: 1px solid yellow;
}

.user a {
    color: white;
}