Html css位置相对不需要的额外空间

我的css中有一种奇怪的效果。当我将鼠标移到一个框上时，它会将下一个框移动32像素。为什么？我想这是因为复选框，但我把它向左移动了32px

html:

JS（不需要）：

---

left:-32px

不移动元素的长方体模型，仅在显示的位置移动。我会以不同的方式处理这个问题：

a {
    position: relative;
}
 a:hover .B {
     display: inline;
}
.B {
    display:none;
    width: 32px;
    position: absolute;
    right: 0;
}

/*.B { display: none; }/**/
 a:hover .B {
    display:inline-block;
}
.B {
    display:none;
    width: 32px;
    position: relative;
    left:-32px;
    vertical-align:top;
}
/
/*/
//.Z > * {vertical-align:top; }

$('.B').click(function () {
    alert('a');
    return false;
});

a {
    position: relative;
}
 a:hover .B {
     display: inline;
}
.B {
    display:none;
    width: 32px;
    position: absolute;
    right: 0;
}