Javascript 改变悬停的边距会改变它下面的所有内容

所以我用CSS创建了一个简单的动画，当我把鼠标悬停在一个图像上时，图像的边距会减小，从而产生向上的效果，但问题是当我改变边距时，它下面的所有东西也会移动。我怎么能只移动图像而不移动整体

CSS:

HTML:

---

发生的情况如下：

给它一个位置，并设置动画，而不是边距：

---

给它一个位置并设置动画，而不是边距：

---

这是一个更新的

小提琴

。在悬停时适当设置底部填充/边距

---

这是一个更新的

小提琴
。在悬停时适当设置底部填充/边距

只需调整底部边距即可进行补偿：


只需调整底部边距即可进行补偿：


在img周围添加固定高度的au div

<div class="row text-center" style="margin-top: 30px; height: 100px;">
    <img src="img/down_arrow.png" class="down_arrow" onclick="goToByScroll('ideas_section');" />
</div>

在img周围添加固定高度的au div

<div class="row text-center" style="margin-top: 30px; height: 100px;">
    <img src="img/down_arrow.png" class="down_arrow" onclick="goToByScroll('ideas_section');" />
</div>


把所有的东西都弄脏了？：）也可以调整底部边距，或者更改元素的相对位置而不是边距。如果要使用边距顶部，则必须以相同的方式修改边距底部。最好改用相对定位，并转换
top
属性：Give
margin-bottom:28px大便所有的事情？：）也可以调整底部边距，或者更改元素的相对位置而不是边距。如果要使用边距顶部，则必须以相同的方式修改边距底部。最好改用相对定位，并转换
top
属性：Give
margin-bottom:28px请（始终）直接在回答中发布一些相关代码我在使用Chrome--文本在动画开始时上移一个像素，然后在动画结束时下移相同的距离。请（始终）直接在回答中发布一些相关代码我在使用Chrome--文本在动画开始时上移一个像素，然后在末端向下移动相同的距离。虽然此解决方案有效，但由于动画上的不对称松弛，它也会导致图像下方的文本不太吸引人。@Blazemonger Odd，哪个浏览器？很好。这两个特性的动画像素数相同。令人惊讶的是，它在所有浏览器中都不干净。我使用的是Chrome——文本在动画开始时向上移动一个像素，然后在动画结束时向下移动相同的距离。这是因为放松导致的；除了
linear
之外的任何东西通常都会有相同的结果。@Blazemonger-Weird。实际上，我对FF中的相对方法也有类似的问题。图像在动画开始和结束时会产生一些奇怪的效果。虽然此解决方案有效，但由于动画上的不对称松弛，它也会导致图像下方的文本不太吸引人。@Blazemonger Odd，哪个浏览器？很好。这两个特性的动画像素数相同。令人惊讶的是，它在所有浏览器中都不干净。我使用的是Chrome——文本在动画开始时向上移动一个像素，然后在动画结束时向下移动相同的距离。这是因为放松导致的；除了
linear
之外的任何东西通常都会有相同的结果。@Blazemonger-Weird。实际上，我对FF中的相对方法也有类似的问题。这张图片在动画的开头和结尾都有一些奇怪的效果。我觉得似乎解决了这个问题。还有什么不对劲吗？我好像能解决它。还有什么问题吗？
  .down_arrow {   
        margin: 15px;
        top:0;
        position:relative;
        -webkit-transition: top 0.5s ease-out;
        -moz-transition: top 0.5s ease-out;
        -o-transition: top 0.5s ease-out;
    }

    .down_arrow:hover {
        top: -12px;
    }

.down_arrow:hover {
    margin-top: 2px;
    margin-bottom: 28px;
}

<div class="row text-center" style="margin-top: 30px; height: 100px;">
    <img src="img/down_arrow.png" class="down_arrow" onclick="goToByScroll('ideas_section');" />
</div>