title: Link clickable area larger than its image
body: <p>I have searched for quite a while and read many of the other answers on this topic. I have a set of image links for which the clickable areas overextend the images, but only on the bottom. The images are the social icons in the site header.</p>
  
  <p>Website link: <a href="http://brendanbikes.org/" rel="nofollow">http://brendanbikes.org/</a></p>
  
  <p>stylesheet: <a href="http://brendanbikes.org/wp-content/themes/casper-wp-master/style.css?ver=3.9.1" rel="nofollow">http://brendanbikes.org/wp-content/themes/casper-wp-master/style.css?ver=3.9.1</a></p>
  
  <p>Relevant class: .social-icons</p>
  
  <p>I've tried changing the float of the individual images, line height, div container height, all to no avail. Why do the links only overextend on the bottom, and how can I prevent this?</p>