jquery - jQuery の上部と下部の位置での奇妙な動作

Question

上と下の配置に奇妙な違いが見られます。この問題を示すために、4 つの簡単な例をまとめました。

jsフィドル

//example 1
$('#box1').hover(function () {
    var offset = $('#box1').offset();
    $("#containment-wrapper1").css({
        bottom: offset.top
    });
});

//example 2
$('#box2').hover(function () {
    var x = $('#box2').css('top');
    $("#containment-wrapper2").css({
        bottom: x
    });
});

//example 3
$('#box3').hover(function () {
    var x = $('#box3').css('top');
    $("#containment-wrapper3").css({
        top: x
    });
});

//example 4
$('#box4').hover(function () {
    var offset = $('#box4').offset();
    $("#containment-wrapper4").css({
        top: offset.top
    });
}); 

例 3 と 4 は期待どおりに動作し、上部の境界線が下部の境界線と一致します。

例 1 と 2 はそうではありません。約30pxの違いがあるようです。

これはバグですか、それとも何か不足していますか?