为什么<a> create a little space under the image?</a>

Question

单击图像时，

This code会留下这个奇怪形状的边框（它是活动的链接边框），如下所示：

当我们put an orange background on the <a> element时，我们发现图像下面有一个橙色区域。因此，<a>环绕图像，但也围绕图像下方的区域。

为什么<a>会这样做？

Answer 1

它实际上根本不在下面。这是因为a标记因默认设置display:inline而崩溃。向这些display: inline-block添加a将解决该问题：

FIDDLE

Alohci offers a great explanation on why this happens

<强>更新

额外的间距是margin上的img：

.social a {
   display: inline-block;
   background-color: orange;
   padding: 0;
   margin: 0;
   vertical-align: top;
}

.socialBtn{
   height: 2.5em;
   width: 2.5em;
   padding: 0;
   margin: 0;
   vertical-align: inherit;
}

NEW FIDDLE

The spacing answer can be provided here

Answer 2

首先，默认元素有一个＆＃39;大纲＆＃39;装饰，禁用它使用以下css规则：

a { outline: 0 }

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

.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。

删除＆＃34;大纲：0＆＃34;从选择器来看，这是一个不好的做法，请阅读为什么here。

Answer 3

inline-block是<a>元素所需的属性。对于间距问题，需要删除边距。

形状奇怪的边框的原因是outline上的<a>属性。它会显示您的链接区域，但由于display和margin属性，它的大小与您的img不同。

这是新的CSS：

.header {
    width: 650px;
    height: 150px;
    clear: left;
    margin: 0px auto;
    background-color: #efefef;
    position: relative;
    border-radius: 4em 4em 0 0;
}

.social{
    padding: 1em 2em 0 0;
    display: inline-block;
    position: absolute;
    right: 0;
}

.socialBtn{
    height: 2.5em;
    width: 2.5em;
}

img {
    display: block;
}

a {
    display: inline-block;
    background-color: orange;
}

http://jsfiddle.net/Lg5a0ksg/4/

Answer 4

将图片设置为display: block（或者vertical-align: bottom）以删除底部的默认空间。 （默认情况下，图片会与他们旁边的任何潜在文字的baseline对齐，即使旁边没有任何文字，他们也会将该空间留在那里。）