Css 如何识别幻影间隙？

header元素包含一个浮动到左侧的元素，以及一个浮动到右侧的元素（带有四个li项）。 很简单，除了文本“最佳城市指南”与右侧的UL稍微不一致之外。
底部边距与图像的下一个容器元素之间存在间隙
这一差距是否导致了不结盟
是什么导致两个“容器”之间的间隙？

（比强制性规范snippit更全面一些）

在这种情况下，收割台的高度由

及其子元素

确定，而不是由左侧的

确定

我发现这一点是通过在标题中的每个元素上使用Google Chrome Dev工具中的“inspect element”，直到找到一个填充整个标题高度的元素，或者显示与高度匹配的边距和/或填充

具体而言，本CSS：

@media (min-width: 769px)
.main-nav {
    float: right;
    margin: 0.67em 0;
}

对于

元素

：

@media (min-width: 769px)
.main-nav li {
    padding: .67em 3em;
}

---

在间隙上单击鼠标右键“检查图元”。应该可以开始了。

ul

元素的边距样式使其高于

h1

@media (min-width: 769px)
.main-nav li {
    padding: .67em 3em;
}