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: 
First, by default element has an 'outline' decoration, to disable it use the following css rule:

```
a { outline: 0 }

```

Second, the area is created by another css property you apply on the image itself: 'margin', which is the margin between the image to the elements around it, in this case it affects the element which wraps it, to fix that change the following rules:

```
.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/>

**UPDATE:**

Changing source to understand how the display property: [block vs inline-block vs inline](https://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block).

Removed "outline: 0" from a selector, it is a bad practice, read why [here](http://outlinenone.com/).
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.)