Question: [This code](http://jsfiddle.net/we67Lp6o/1/) leaves this weirdly shaped border *(it's the active link border)* when you click the image, like so:

![enter image description here](https://i.stack.imgur.com/tIJ3X.jpg)

And when we [put an orange background on the `<a>` element](http://jsfiddle.net/Lg5a0ksg/2/) we see that there's an orange area underneath the image. So, `<a>` wraps around the image, but also around an area underneath it.

Why does `<a>` do that?

Answer: 
It's actually not spacing underneath at all. It's because your `a` tag is collapsed due to the default setting of `display:inline`. Adding `display: inline-block` to those `a`s will fix that issue:

[**FIDDLE**](http://jsfiddle.net/Lg5a0ksg/3/)

[Alohci offers a great explanation on why this happens](https://stackoverflow.com/a/18586297/3763850)

**UPDATE**

The extra spacing is the `margin` on the `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**](http://jsfiddle.net/we67Lp6o/7/)

[The spacing answer can be provided here](https://stackoverflow.com/a/3197613/3113558)
Set your images to `display: block` (or alternatively, to `vertical-align: bottom`) to remove the default space at the bottom. (By default, images align to the `baseline` of any potential text next to them, and they leave that space there even if there's no text beside them.)