title: Can you make "an invisible border"?
body: <p>I'm trying to <a href="http://jsbin.com/imuwe4" rel="noreferrer">make a navbar</a> as an exercise.</p>
  
  <p>I'm using <code>a:hover</code> to include a solid border around the button being hovered. However, this makes all the other buttons move by the size of the border.</p>
  
  <p>What is the proper fix to this problem? I know there are others (discussed <a href="http://www.youtube.com/watch?v=SuL2tSlJtSk&amp;feature=player_embedded" rel="noreferrer">here</a>), I specifically tried to make the border "be invisible yet take up space even when not hovered". I set <code>border:transparent</code> hoping it might do what I want, but it did not show take space at all.</p>
  
  <p>I know I could hand pick the border's color to be equal to the background and make it solid, but this is not what I want. Is there a sane way to solve this issue?</p>