html - 为什么 在图片下方留出一点空间？

Question

This code当您单击图像时，会留下这个形状怪异的边框(它是事件链接边框)，如下所示:

当我们 put an orange background on the <a> element我们看到图像下方有一个橙色区域。所以，<a>环绕图像，但也环绕图像下方的区域。

为什么 <a>这样做吗？

Answer 1

首先，默认情况下，元素有一个“轮廓”装饰，要禁用它，请使用以下 css 规则:

a { outline: 0 }

其次，该区域由您应用于图像本身的另一个 css 属性创建:'margin'，它是图像与其周围元素之间的边距，在这种情况下它会影响包裹它的元素，以修复更改以下规则:

.socialBtn { 
    /* Removed margin here so there won't be space around image */
    height: 2.5em;
    width: 2.5em;
} 
a {
    height: 2.5em; /* Gave it width like the image */
    width: 2.5em; /* Gave it height like the image */
    display: inline-block; /* Made it inline-block so it can have width and height */
}

http://jsfiddle.net/we67Lp6o/6/

更新:

更改源以了解显示属性的方式:block vs inline-block vs inline .

从选择器中删除了“outline: 0”，这是一种不好的做法，阅读原因 here .