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

Question

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

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

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

相关类:.social-icons

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

Answer 1

这是由a标记的默认显示(display: inline;)引起的。

添加这个CSS，一切都会好的:

.social-icons a {
    display: inline-block !important; /* !important could be omitted */
}

Answer 2

不能改变行内元素的高度和宽度。通过指定display: inline-block，您可以调整.social-icons a对象的height:

添加到.social-icons a规则:

display: inline-block;
height: 1em;

Answer 3

解决方案有点粗糙，但添加以下内容将强制切断容器外部的任何内容，并考虑水平切断:

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