元素 1 的 CSS 顶部为 x%，高度为 y%。元素 2 的 CSS 顶部为 (x+y)%。为什么像素值不同？

Question

我有一个尺寸问题。

我正在努力实现的目标的总结

我正在使用可调整大小和可拖动的功能以及一些 JS 代码来设置屏幕上元素的顶部、左侧、高度和宽度。我希望能够调整一个元素的大小，直到它与另一个元素发生冲突。如果要调整大小的元素与另一个元素发生碰撞，则它应该是齐平的，即元素之间应该没有间隙地接触。

我看到的尺寸问题

当我调整一个元素的大小时，它会在与另一个元素发生碰撞时停止调整大小。一切看起来都很好，但有时元素之间会出现一个小间隙（通常小于一个像素大）。 当我计算第一个元素的顶部 + 高度时，为了得到它的底部，它似乎与第二个元素的顶部匹配，如预期的那样，例如如果元素 1 的顶部 = 10%，元素 1 的高度 = 10%，则元素 2 的顶部等于 20%。完美！

然后我计算像素值并看到以下内容：

Element1.offset().top + Element1.height() != Element2.offset().top

屏幕截图问题示例

我想知道为什么百分比与相应的像素值不匹配。我在下面提供了一个示例，并附有图片，以说明我的问题。

元素 1（元素上方）：

Top + Height = Bottom

13.64% + 13.68% = 27.32%

Element 1 and its percentage top and height

元素 2（元素下方）：

Top = 27.32%

Element 2 and its percentage top and height

如上所示，元素 1 的顶部加上高度等于元素 2 的顶部。但是看看当我以像素为单位计算相同的值时会发生什么：

Element1.offset().top + Element1.height() = 175.5875015258789px

Element2.offset().top = 175.60000610351562px

Pixel values of top + height of Element1 vs top of Element2

如果百分比值相同，为什么 Element1.offset().top + Element1.height() 不等于 Element2.offset().top？

Here's a link to the JSFiddel demo of the software

Answer 1

删除问题所在的边框。 css

* {border-style: none;}