x物体之间的坐标距离

Question

我在SVG元素中垂直绘制了矩形（例如，顶部的蓝色框和底部的绿色框），并尝试在蓝色框的底部和绿色框的顶部之间保持10的填充，而蓝色底端永远不会在绿色底端之下。

let minPadding = 10;//min difference to maintain and not pass between blueBottom and topGreen;
let blueBottom = (-20);//coordinate of bottom of blue box;
let greenTop = (-12);//coordinate of top of green box;

let diff = Math.sqrt(Math.pow((blueBottom-greenTop),2));
if (diff < minPadding) {
    console.log('collision');
}

上面的代码检测到blueBottom是否在greenTop的10内，我遇到的问题是blueButtom可能会被推到greenTop的10以下（例如blueBottom（-1），greenTop（-12））。

此外，我不得不考虑blueBottom和greenTop可能都是正x，负x或两者兼而有之。任何帮助将不胜感激！