为什么<a>在图片下创建了一点space？

Question

This code 会留下这个形状怪异的边框 （它是活动的 link 边框） 当您单击图像时，如下所示：

当我们 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

更新

额外的间距是 img:

上的 margin

.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

首先，默认情况下元素有一个 'outline' 装饰，要禁用它使用以下 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。

Answer 3

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

Answer 4

inline-block 是您需要 <a> 元素的属性。对于间距问题，需要去掉边距。

边框形状奇怪的原因是 outline 属性在 <a> 上。它向您显示 link 的面积，但由于 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/

为什么<a>在图片下创建了一点space？

Why does <a> create a little space under the image?

html

css