两个div似乎具有相同的高度，但在计算时，不这样做

Question

我需要将这两个盒子连接起来，从一个到另一个。

我的解决方案是计算节点＆＃39;在每个div的四个边缘的每一个的中间，然后比较距离，找到彼此最接近的两个节点。

但是，我有一个问题：

上面的屏幕截图显示了两个看似高度相同的div，但是底部节点在第一个节点上显示不正确。

以下是计算节点＆＃39;

的JS

var position = $(this).position();
var width = $(this).outerWidth();
var height = $(this).outerHeight();

var step_id = $(this).attr('id').replace('step-', '');

var left = position.left - parseInt($('#steps-canvas').css('padding-left'));
var top = position.top;


// Create nodes clockwise from top-left
nodes[step_id] = [
  [left + (width / 2), top], // Top edge
  [left + width, top + (height / 2)], // Right edge
  [left + (width / 2), top + height], // Bottom edge
  [left, top + (height / 2)] // Left edge
];

以下是结果：

我非常困惑为什么第二个div的底部节点（数组中的＃2）没问题但是第一个是out（看起来是18px）。

有关这种差异的任何想法？问题出现在项目的其他方面，但我似乎无法确定模式。