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

Question

This code leaves this weirdly shaped border (it's the active link border) when you click the image, like so:
And when we put an orange background on the <a> element 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 1

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.
Removed "outline: 0" from a selector, it is a bad practice, read why here.

Answer 2

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 as will fix that issue:
FIDDLE
Alohci offers a great explanation on why this happens
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
The spacing answer can be provided here

Answer 3

inline-blockis the property you need for the <a> elements. For the spacing issues, the margins need to be removed.
The reason for the strangely shaped border, is of the outline property on <a>. It's showing you the area of your link, but due to the display and margin properties it is a different size than your img.
Here is the new 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

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