Html CSS悬停正在影响兄弟元素？

我已经创建了以下部分，作为我目前正在开发的网站的一部分

当职位下面的社交媒体图标用光标悬停在上方时，CSS应该在图标周围单独生成一个边框，而不会影响整个部分的任何其他内容。然而，当边框出现时，其他灰色框似乎得到了类似于

边距顶部的效果

这是上一段中描述的内容：

我试图达到的效果与后一张照片中看到的效果相同，只是没有按下另一个div。在某种程度上，这种效果看起来不错，但我想知道是什么导致了它，以及如何避免它

这是其中一个框的结构，例如：



约翰·布鲁
网页与图形设计师
您的问题是每个机组成员都显示为
内联块
。然后，当您将图标悬停并增大其大小时，完整内容的行高将增大，其他成员将向下滑动

为了防止出现这种情况，您需要像这样将每个成员与顶部对齐

.who .crew-container .crew-member {
    vertical-align: top;
}

以下是更新后的JSFIDLE:
您可以将HTML和CSS发布在代码片段中，还是发布在JSFIDLE中？谢谢。这与你的html无关，请提供你的css和相关的javascript。这取决于css。可能有两个问题：1。您已经设置了社交图标：悬停{margin top}或->2。子元素的边距会影响整个父元素（如果您使用display:table或其他东西），虽然它不是100%重复，但足以解决我遇到的问题。为了更好地显示结果，这里是全屏显示：这确实是答案，非常感谢Joaquin O.：）