链接可点击区域大于其图像

Question

我已经搜索了很长一段时间，并阅读了有关此主题的许多其他答案。我有一组图像链接，可点击区域过度扩展图像，但只在底部。图像是网站标题中的社交图标。

网站链接：http://brendanbikes.org/

样式表：http://brendanbikes.org/wp-content/themes/casper-wp-master/style.css?ver=3.9.1

相关课程：.social-icons

我试过更改单个图像的浮动，行高，div容器高度，都无济于事。为什么链接只在底部过度扩展，我该如何防止这种情况？

Answer 1

您无法更改内嵌元素的高度和宽度。通过指定display: inline-block，您可以调整height个对象的.social-icons a：

添加到.social-icons a规则：

display: inline-block;
height: 1em;

Answer 2

解决方案有点笨拙，但添加以下功能可以切断容器外的任何东西，并解释水平截止：

.social-icons a{
    overflow:hidden;
    padding-left:0.1vw;
    padding-right:0.1vw;
}

希望这可以帮助其他人。