Padding vs Margin in a Link

Something very simple and obvious that I just learned is that padding and margins are different (duh!). The main difference is that a padding is still within an element and a margin is outside an element. This is something I knew but I was able to see a reason why this is important today.

Take the following code:

<ul class="social-media-links">
    <li><a href="#">
         <i class="icon-ico-facebook"></i>
           Facebook</a>
   </li>
     <li><a href="#">
         <i class="icon-ico-twitter"></i>
           Twitter</a>
     </li>
 </ul>

My original styling was:

 i{
  margin-right: 10px;
  color: white;
}

This produced this:

Which is what I wanted! But I noticed that as I hovered over the icon and then the words, there was a gap in the link. Margins caused the link to be non-existant between the icon and words in my anchor.

The solution was very simple--change margin-right to padding-right.

Again, a very simple, duh-type bug, but I thought, I'd share it with you all non-the-less.