为什么两个div之间出现一小段空间叠在一起

Question

我在div中运行一个滚动条脚本，看起来不错。有人要求我在滚动条下方添加一个跟踪栏，其风格与脚本附带的跟踪栏不同。他们希望滚动条看起来像是在轨道内滑动，这就是做这些额外内容的原因。

重点是不使用图像，我设计了一个CSS3风格的轨迹栏，并将其放在滚动条所在的右下方。我把它全部排成一列，但不能为我的生活看到主要div的蓝色背景颜色和轨道栏div之间的小空间。为什么蓝色和轨迹栏之间有一条白色？

这是一个fiddle，或者这里是test page（它是右上角的蓝色）。

我觉得它一定是在我的鼻子底下。但是我已经将它消灭了，虽然我可以让段落，链接和标题延伸到栏下面（为了向自己证明我可以在轨道栏下面找到东西），我无法让蓝色在下面。我很肯定它与double float：right设置有关，但我认为我可以用position，z-index覆盖它。只有我不能。

我完全乐于被告知“你做错了。”我愿意重新使用我的整个方法。

轨道栏的CSS（减去渐变内容）：

.trackbar {
    width: 17px;
    height: 277px;
    float: right;
    margin-right: -20px;
    z-index: 20;
}

蓝色div的CSS

.whatsnew {
    background-color: #DEE9F3;
    border-bottom: 1px solid #7E99CE;
    border-top: 1px solid #7E99CE;
    float: right;
    height: 276px;
    margin: 0 20px 0 0;
    padding: 0;
    position: relative;
    width: 290px;
    z-index: 10;
}

Answer 1

神秘的白色差距

轨道栏在比轨道栏本身大3px的区域中向右浮动。如果轨迹栏需要为17px，则将外部容器的20px边距和轨道条的相应-20px边距分别降低到17px和-17px。

父div为310px，左边的div只有290px，但你的轨迹栏只有17px（而不是剩下的20px）。

替代解决方案

另一种解决方案是为父div提供背景颜色，使蓝色也在轨迹栏后面。

调试CSS /定位

调试此类问题的一种方便方法是使用Chrome的调试器。在Chrome中按F12，然后选择左下角的小放大镜图标。您可以将鼠标移到页面上的空白处，看看是什么创建了该空间。

您还可以查看元素标签右侧的计算样式部分，以确切了解DOM节点对每个属性的值以及导致的原因/影响这些财产。

Firebug具有Inspect功能，其行为应该类似。

Answer 2

好的，我是在Corion和Kevin B的帮助下得到的。

两者都是对的，将-20px的边距降低到-17px。

然后我不得不从那里开始，将蓝色方块（.whatsnew）上的边距降低到17.现在白色的条子已经消失了。如果没有那两个让我看到17px的东西，我无法达到那一点。

谢谢！