为什么第二个元素有边距？

Question

.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;
}

我有两个div元素，分别是徽标和用户。

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

为什么会发生以及如何解决？

Answer 1

您应该添加选定样式的位置：固定；和溢出：隐藏；  这样。

$$ 
\require{boldfont} 
\bf=\bu+\bv-\bw
$$

Answer 2

这是因为 display：inline-block; 包含默认的页边距，为避免页边距，请在CSS中使用float：left

.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;
}

或者您可以查看这篇关于Click here的有用文章！