div之间的奇怪差距

Question

我遇到了div之间奇怪的差距问题 Div是可折叠的，看起来它们之间会产生额外的几个像素。这不是利润，只是差距。

以下是我的代码示例。左侧“GameName”菜单项是可点击的。

我只是在点击时添加和删除显示样式来创建折叠效果：

if (panel.style.display === "block") {
    panel.style.display = "none";
} else {
    panel.style.display = "block";
}

https://codepen.io/anon/pen/eMzyMp

Answer 1

您的差距实际上是<ul>元素的边距，由浏览器添加。试试这个：

ul {
    margin: 0;
}

Answer 2

奇怪的差距来自孩子的下边距（<ul>），默认浏览器样式添加在<ul>上。

.locations ul {margin-bottom: 0}

fixes it